parallax

¿Qué es el Parallax Scrolling?

En la empresa en la que trabajo estamos desarrollando una nueva web corporativa, lo que me traerá muchos quebraderos de cabeza y me quitará muchas horas de sueño, pero también será una fuente de inspiración de nuevos artículos…

La moda marca nuestra forma de vida cobrándose cada día más y más víctimas y el diseño web no puede escapar de las “garras” de las nuevas tendencias. Hoy en día es impensable hacer una web “molona” y con un diseño actual sin utilizar Parallax Scrolling.

Esta sorprendente técnica se lleva utilizando en la animación tradicional desde hace más de 60 años y se popularizó a partir de 1982 con el video juego “Moon Patrol” desarrollado por la empresa japonesa Irem, la primera en incluir “scrolling shooter” en sus video juegos. 

Recuerdo cuando era niño que tenía un “sofisticado” juego en el que había un palito con la silueta de una moto que sólo podías mover de izquierda a derecha y de fondo una pantalla que se movía verticalmente -no era más que una tira de papel pintada que giraba- y debías esquivar las piedras, charcos y demás obstáculos que te encontrabas, por supuesto no puntuaba ni pasaba nada cuando pasabas por encima de uno de estos elementos y la pantalla giraba en un bucle infinito. Pues bien, este es el concepto del Parallax Scrolling: 2 o más capas de imagen, una superior y otra de fondo que se mueven a diferentes velocidades creando una apariencia de profundidad y tridimensionalidad. Seguro que todos hemos jugado en alguna ocasión en los recreativos con algún arcade que utilizase esta técnica, tanto con scroll vertical como horizontal.  

Cada vez es más habitual navegar por webs con efecto “Parallax” -que en griego significa “alteración”- con complejas animaciones y efectos visuales sin necesidad de utilizar Flash. Con la combinación, superposición y movimiento de diferentes capas podemos desarrollar webs interactivas e incluso lograr ilusiones 3D como en el siguiente ejemplo desarrollado por la agencia KesselsKramer para Tele2:

https://www.tele2.nl/met-minder-geen-genoegen/

En este extraordinario microsite de Nintendo se pueden apreciar las múltiples posibilidades que ofrece la tecnología Parallax, en este caso con scroll horizontal y un sinfín de capas:

http://www.nintendo.com.au/gamesites/mariokartwii/

Este recurso, combinado con técnicas de neuromarketing, no sólo sirve para hacer webs más atractivas, permite al usuario vivir y sentir una auténtica experiencia navegando por nuestro site, poder mostrar un producto o servicio contando una historia y creando una atracción o efecto hipnótico que invite al usuario a seguir haciendo scroll invadido por la curiosidad. De esta manera conseguiremos que pase más tiempo navegando por nuestro portal, que repita la experiencia y además que comparta y recomiende el sitio por todo lo que aporta al usuario.   

Gracias a HTML5, CSS y jQuery -la biblioteca de JavaScript más utilizada y con infinitas funcionalidades- las posibilidades de Parallax no tienen límite…  Podemos lograr efectos e ilusiones tan complejas y espectaculares como con la tecnología Flash pero desarrollando webs amigables para Google, podemos crear originales efectos a través de clics o mediante scrolling y diseñar sorprendentes “llamadas a la acción”.

Si Apple, que marca el camino y lidera el cambio, incluyó efectos con tecnología Parallax en su sistema operativo iOS 7, tendría buenos motivos para hacerlo…

Escribe una respuesta


− 3 = cinco

Puedes utilizar etiquetas HTML <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>