Si eres una de esas personas amantes de los vetustos juegos de plataformas horizontales es probable que sin saberlo te hayas topado cientos de veces con el parallax scrolling (lo que en español vendría a ser algo así como desplazamiento con paralelaje). Esta técnica consigue engañar a nuestro ojo para apreciar profundidades 3D en un dibujo 2D.
Su funcionamiento es bastante simple de entender, y más sencillo de ejecutar que crear un modelado 3D y renderizarlo. Se basa en un principio de óptica por el cual los objetos más cercanos sufren una desviación angular aparente superior a los lejanos. O dicho de modo más llano, los objetos que están en primer plano se desplazan más rápido que los que están en el fondo.
Y su implementación no es mucho más complicada, ya que basta con crear distintas capas y mover cada una a velocidad distinta según nuestro centro de atención se vaya desplazando. Por ejemplo, en un juego típico como Sonic o Mario, lo normal es tener tres capas: una para el primer plano que se desplaza a la misma velocidad que nuestro personaje, otra para el segundo plano que se desplazará a una velocidad menor, y una última para el fondo muy lejano que se desplaza muy lentamente o incluso permanece estática.
Para evitar la sensación de saltos para la vista que produce la imagen anterior, y que el desplazamiento resulte suave para el ojo humano, lo ideal es que la tasa de refresco sea de entre 60 y 120 fps.
Pero esta técnica no sólo es útil en videojuegos, sino que también se puede aplicar en la elaboración de páginas web para obtener resultados sorprendentes. Desde simular un ascensor que desciende hasta la Atlántida a un simple detalle estético que sólo se aprecia redimensionando la ventana.
Y si enfrentarte a pelo con el CSS, layouts y profundidades te asusta, existe un magnífico plugin para jQuery llamado jParallax, con el que aparte de ganar en sencillez, podemos hacer que el efecto se dispare por todo tipo de eventos: movimiento del ratón, clics, scroll vertical, redimensionado de la ventana, etc. No os perdáis sus demos para ver todo su potencial.
Vía | @vlledo
Más información | Tutorial sobre Parallax Scrolling en web
Imágenes | Wikipedia: Capas y ejemplo
