El parallax scrolling es una tendencia en diseño web, que consiste en superponer varias capas para crear sensación de profundidad. El resultado es un efecto en tres dimensiones o panorámico. Al desplazarnos por la web, el fondo es más lento que los contenidos que aparecen en primer plano. Esta técnica de animación nació en los años ochenta, con el desarrollo de la industria de los videojuegos. Super Mario Bros, Streets of Rage and Moon Patrol emplearon este mecanismo.
El término “parallax” significa “alteración” en griego. Lo cierto es que cada vez un mayor número de webs emplean este efecto, que resulta sorprendente y hasta hipnotizador. Pero no deberíamos dejarnos llevar, simplemente, por su trascendencia visual, que resulta indudable. El objetivo pasa por seducir al internauta para que interactúe con nosotros. Bien empleado, el parallax scrolling puede lograr que el público acceda a contenidos, que difícilmente hubiera descubierto sin tan atractivo efecto.
El parallax scrolling supone la utilización de imágenes de gran tamaño y los consecuentes recursos de pre-carga. Debemos ser creativos y originales al crear éstos, si no queremos perder tráfico durante esos segundos. La técnica requiere implementar diseño web adaptativo para una óptima visualización.
Dadas sus características, el parallax se está empleando, muy especialmente, en los ámbitos de la presentación de productos y en imagen corporativa. En definitiva, tiene gran predicamento en webs en las que los contenidos visuales poseen gran importancia. Las capas, también denominadas divs o sections, desarrollan su función con los movimientos del ratón, barra de desplazamiento o botones. La gran baza de la técnica es que el Flash brilla por su ausencia, se usa HTML estándar y eso facilita la compatibilidad con mayor número de navegadores.
Como señala el desarrollador Antonio Navajas, la clave de implementar parallax scrolling en CSS radica en las declaraciones background. Posicionar el fondo, a través de porcentajes distintos en cada capa logra que, al redimensionar la ventana, las diferentes imágenes compongan una curiosa sensación de profundidad y movimiento.
Para aplicar la técnica existen varios desarrollos web. Destacan, entre todos ellos, Jquery.parallax y Jarallax. El segundo es más atractivo e idóneo para componer imágenes con sensación de movimiento, interacción y efectos 3D. Se trata de un JavaScript de código abierto, que hace más sencillo el ajuste de CSS.
Para desarrollar un sitio en parallax scrolling, que sea compatible con SEO, es necesario tener presentes ciertas ideas y no cometer determinados errores. Por ejemplo, es frecuente incluir home y secciones en el mismo URL. Sería interesante que cada keyword tuviera su propia dirección, para mejorar la optimización SEO. Muchas webs premiadas por su diseño y efectos visuales olvidan el posicionamiento y las medidas que lo fomentan.
Aunque los orígenes del parallax scrolling se remontan a los videojuegos de primera generación, es en estos momentos cuando la técnica está viviendo su expansión mundial y un momento dorado. La sorprendente calidad visual que ofrece, sin embargo, no debe hacer olvidar la necesaria adaptación multidispositivo, el posicionamiento SEO o la interacción del visitante con nuestro sitio.
Imagen: Wikimedia Commons-Claas Paletta, PR & New Business Manager of Daedalic Entertainment GmbH (rights owner)
Extracto: El parallax scrolling es una técnica que consiste en superponer varias capas, para generar sensación de profundidad y un efecto 3D. El resultado es una sorprendente calidad visual, aprovechada para presentar productos o imágenes corporativas. Sin embargo, su aplicación debe ser compatible con la necesaria adaptación multidispositivo, con SEO y con la interacción del visitante con el sitio.
Foto: http://commons.wikimedia.org/wiki/File:TWW_parallax_scrolling_sample_1.jpg
Fuentes:
- http://www.antonionavajas.com/blog/categoria-tutoriales/parallax_scrolling_css/
- http://www.mediaclick.es/blog/nuevas-tendencias-en-diseno-web-parallax-scrolling-website/
- http://www.marketingdirecto.com/actualidad/digital/las-10-tendencias-mas-in-de-diseno-web/
