Scroll Paralax

Tendencias de diseño web 2013: el Scroll Paralax

En este post os quería hablar de una técnica de presentación de contenidos que está dentro de las tendencias de diseño web en este año 2013, y es el Scroll Parallax. No sólo os quiero mostrar qué es y sus características, si no también algunos ejemplos muy interesantes.

¿Qué es el Scroll Parallax?

Con el  Scroll Parallax se consigue un efecto de profundidad y movimiento en una web mediante una técnica que juega con el movimiento a distintas velocidades de varias capas de contenidos, como puede ser imágenes, textos. Este efecto en una web se visualiza al hacer scroll (normalmente vertical, aunque últimamente van apareciendo más con horizontal), y vemos como el fondo y otros planos de elementos se visualizan en movimiento a distintas velocidades, creando un efecto visual muy atractivo.

A continuación os presento unas webs de ejemplo para que podáis ver cómo funciona, ya veréis lo impresionantes que son, tan sólo hacer click en cada una de las siguientes capturas:

– Presentación de ideas:

Ejemplo Scroll Parallax - soleilnoir

– Web corporativa:

Ejemplo Scroll Parallax - sweez

 

–  E-commerce

Ejemplo Scroll Parallax - tinke

 

– Ejemplo de Scroll Parallax utilizando palabras como principal contenido:

Ejemplo Scroll Parallax - tokiolab

 

–  Web corporativa de empresa de diseño:

Ejemplo Scroll Parallax - iutopi

 

– Webs de reconocidas empresas de servicios online

Ejemplo Scroll Parallax - flickr

Ejemplo Scroll Parallax - spotify

 

 ¿Pero el Scroll Parallax es nuevo?

Para nada. Scroll Parallax apareció ya hace ya muchos años en el mundo de los videojuegos (en los años 70 ya había juegos que lo utilizaban), pero es ahora cuando en el mundo web está tomando mucha fuerza debido al dinamismo que da esta técnica a una web.

 

¿Qué ventajas e inconvenientes tiene el uso de Scroll Parallax en una web?

El uso de esta técnica nos proporciona algunas ventajas:

– La posibilidad de interacción con la web.

Mostrar distintas vistas de un producto de una manera sencilla y rápida.

Contar una historia.

– Mejorar la llamada de la acción al usuario.

 

¿Y qué desventajas nos puede ofrecer Scroll Parallax?

– Un uso excesivo de elementos participando en el Scroll Parallax puede llegar a ser demasiado agobiante y no conseguir llevar al usuario a dónde queremos.

– Al ser una única página, son páginas de mucho peso.

– Únicamente utiliza una URL.

– Estas dos últimas características, junto a otras que os muestro en la siguiente imagen, hace que empeore el SEO de la página:

Scroll Parallax y SEO

Aunque existen estas desventajas, hay algunas soluciones para intentar minimizar estos problemas, como el que Awwwards nos propone en la siguiente infografía:

Solución Scroll Parallax y SEO

Espero que gracias a este post hayáis aprendido un poco sobre una de las mayores tendencias en cuanto al diseño web de este año, y ya veréis como a medida que vaya pasando el tiempo, nos iremos topando cada vez con más sitios web que utilicen Scroll Parallax. ¿Y qué os parece este efecto? ¿os gusta? ¿conocéis alguna página que utilice este efecto y que os encante (o no os guste para nada)?

Tendencias de diseño web 2013: el Scroll Paralax 5.00/5 (100.00%) 10 votos

3 comentarios

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

A %d blogueros les gusta esto: