¿Quién no recuerda esos viejos videojuegos 2-D en los que íbamos moviendo a nuestro personaje de izquierda a derecha por el escenario y, al fondo, varias hileras de elementos superpuestos se iban desplazando a velocidades diferentes? La Wikipedia lo describe así:
Es un tipo de scroll más complejo, en vez de mover un solo dibujo como escenario de fondo, se mueven dos o más planos de scroll para dar una cierta sensación de profundidad al videojuego.
Ejemplo: un escenario formado por unos árboles en primer plano, luego unas casas más lejanas moviéndose más despacio que los árboles, y al fondo unas montañas moviéndose aún más despacio. Con esto tendríamos un scroll de tres planos, mucho más atractivo a la vista que un simple fondo desplazándose lateralmente.
Era cutre, vale… pero efectivo. Y, sin duda, lo que no esperábamos era que este efecto (conocido como ‘parallax scrolling’) volviera varios años después en un escenario muy diferente: como una de las grandes tendencias del año en materia de diseño web.
Realmente se había empezado a popularizar hacía ya unos años, a raíz de la publicación de web “Nike Better World” en 2011, pero en 2014 hemos vivido el boom de este tipo de diseño en webs y landing pages con un diseño creativo y, frecuentemente, de una única página (aprovechando así para tener suficiente contenido como para poder hacer scroll durante un rato).
¿El nuevo Flash?
Hay quien, por su espectacularidad, considera a las webs que usan esta técnica las legítimas herederas de las antiguas web en Flash (y si te parece exagerada la afirmación siempre puedes entrar a comprobarlo en una web como ésta sobre la tendencia web de moda en 2013: el diseño flat). Lo malo es que han heredado algo más de ellas que la espectacularidad gráfica: los problemas de posicionamiento.
Y es que el parallax scrolling casa mal con la optimización SEO, dado que:
- Suele vincular todo el contenido a una misma URL. Hay formas de arreglar esto (como aplicar las recomendaciones de Google para las webs con scroll infinito), pero los webmasters no suelen hacer uso de ellas. Otra solución, claro, es apostar por implementar el parallax únicamente en la portada de la web, y optar por un diseño más ortodoxo para el resto de las secciones.
- Ser demasiado pesado para cargar toda la página al mismo tiempo, lo cual se agrava en dispositivos móviles (los cuales ya son de por sí poco poco adecuados para este efecto).
Y al igual que las webs con Flash, aquellas que hacen uso intensivo del parallax scrolling presentan también problemas en otras áreas como la usabilidad, la accesibilidad, y la analítica (en una web con una única URL se hace muy difícil extraer datos útiles sobre secciones más visitadas, porcentaje de rebote, etc).
Para aprender más sobre el funcionamiento del parallax scrolling a nivel técnico, os recomiendo echar un vistazo a este tutorial, que aplica esta técnica al tiempo que explica el código HTML y Javascript que lo hace posible (e incluye, a su vez, enlaces a múltiples ejemplos): Superscrollorama.
Imagen | Wikipedia
from TICbeat http://ift.tt/1kczaB7
