Scroll Parallax

Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter

A pesar de lo extraño que pueda parecer esta palabra, el Scroll Parallax es una técnica muy llamativa de diseño de páginas web que tiene como fin interactuar con el usuario para mostrar el contenido de una forma mucho más agradable. Consiste en crear animaciones con algo tan sencillo y de toda la vida como es el scroll, es decir, cada vez que una visita se desplaza mediante la barra lateral de nuestra página, se desarrollará una o varias animaciones.

De este modo el Scroll Parallax hace posible crear animaciones dentro de una página sin necesidad de utilizar pesados añadidos como Flash.

Para entender su funcionamiento nos tenemos que remontar a los años de los lanzamientos de los primeros videojuegos, que básicamente hacían uso de imágenes superpuestas que se desplazaban a diferentes velocidades. Esta es la misma técnica que se aplica a este tipo de sites llamado Scroll Parallax, donde se crean diferentes capas que deberán moverse a distintas velocidades con el fin de determinar el punto de atención de lo que se quiera resaltar. El objeto más cercano se sitúa en un primer plano y se desplaza a una velocidad mayor, los otros objetos se encuentran en segundo plano, ya sean en el fondo o permaneciendo inmóviles. Las visitas sólo tendrán que desplazar su ratón mediante la página para que la animación comience, es importante que el desplazamiento sea lento y constante hacia el final.

Para entenderlo mucho mejor presentamos unos ejemplos de páginas web creativas realizadas con la técnica Scroll Parallax. Si eres desarrollador y estás interesado en esta técnica, fíjate en las capas que deberán de moverse a diferentes velocidades con el fin de resalta la animación.

 

Notevayasaalemania

notevayasaalemania

Nike Better World

nikebetterworld

Smokeybones

smokeybones

Beetle

beetle

Ericj

ericj

Este último site es también un ejemplo de cómo puede utilizarse la técnica Scroll Parallax en la barra de desplazamiento horizontal.

Como podemos ver, el resultado final de estos sites impulsa a navegar hasta el final de las páginas ya sea mediante el teclado o ratón. Además al tratarse de movimientos propios de la navegación estos efectos pueden verse en tablets o dispositivos móviles.

2 comentarios

  1. Ejemplos geniales de web desarrolladas con la técnica Scroll Parallax dijo:
    13 julio, 2012
    Responder

    […] lanza nueva app más social y revoluciona el mercado 2 alma 10 Ejemplos geniales de web desarrolladas con la técnica Scroll Parallax por ekarine en tecnología | diseños hace […]

Deja un comentario

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

De conformidad con lo establecido en la LOPD, Adpv Advertising Provider S.L. garantiza la adopción de las medidas necesarias para asegurar el tratamiento confidencial de los datos de carácter personal. Así mismo le informamos de la inclusión de sus datos en un fichero con la finalidad de mantener su relación negocial o contractual con Adpv Advertising Provider S.L. y de la posibilidad de ejercer los derechos de acceso, rectificación, cancelación y oposición en la siguiente dirección: Ercilla, 26, 1Dcha., 48011, Bilbao, Bizkaia. Privacidad.