Parallax Scrolling: introducción y ejemplos

En el artículo 11 Tendencias de Diseño Web para 2011 incluíamos la técnica Parallax Scrolling como una de las que tendrían más preponderancia durante este año en cuanto a tendencias de diseño web.

El uso de parallax scrolling está en la línea de sustituir Flash por otras tecnologías que permitan incluir efectos visuales. Se trata de un efecto que genera la ilusión de estar visualizando un espacio en tres dimensiones utilizando imágenes distribuidas en capas que se mueven a un ritmo diferente.

Para implementarlo se pueden recurrir a trucos CSS o utilizar plugins jQuery como Spritely. Su utilización puede ser más efectiva incluyéndolo como un elemento secundario en nuestro diseño , por ejemplo, como un encabezado o pie de página o como fondo de la misma.

Nike

En su página  Better World utilizan parallax scrolling como elemento de interface para hacer hincapié en el mensaje.Ejemplo de uso de Parallax Scrolling: Nike Better World

Mario Kart Wii

En Mario Kart Wii utilizan parallax scrolling para crear un microsite para el juego. Ejemplo de uso de Parallax Scrolling: Mario Kart Wii

David Beckham

En la página de homenaje a David Beckham, podemos encontrar la aplicación de la técnica para la creación de un portfolio en un sitio web de una sola página.Ejemplo de uso de Parallax Scrolling: David Beckham

The Moods of Norway

The Moods of Norway site es otro gran ejemplo del uso de parallax scrolling.  Echadle un ojo a la solución de scroll horizontal y al uso de los contenido textual.Ejemplo de uso de Parallax Scrolling: The Moods of Norway

Iutopia

En el sitio web Iutopia.com destaca el uso de esta técnica para incluir efectos de profundidad en el eje vertical.Ejemplo de uso de Parallax Scrolling: Iutopia

Lenovo

En Rapidboot.com se utiliza un efecto similar al del ejemplo anterior para dar una sensación de caída. Ejemplo de uso de Parallax Scrolling: Rapid Boot

Netlash

The Netlash site utiliza efectos parecidos a los ejemplos de las páginas sobre  Beckham y en Iutopia. Manejan el scroll vertical con imágenes de fondo. Ejemplo de uso de Parallax Scrolling: Netlash

Row to the Pole

En Row to the Pole la perspectiva para el espectador es desde el cielo, por lo que mientras se desplaza por el sitio se muestran capas de nubes que pasan por debajo del visitante. El único inconveniente de este sitio es que al salir de la página de inicio se pierde la función de scroll parallax y todo lo que tienes es un fondo blanco.
Ejemplo de uso de Parallax Scrolling: Row to the Pole

Rastape

Rastape es un sitio web que utiliza PS para crear una interface más propia de un video juego que de una página web. Destaca también por la brillante incorporación del pie de página y el encabezado al conjunto de la página.
Ejemplo de uso de Parallax Scrolling: Rastape

Smokey Bones

En Smokey Bones utilizan esta técnica para las barras de desplazamiento.Ejemplo de uso de Parallax Scrolling: Smokey Bones

Fuente de los ejemplos: 10 Awesome Parallax Scrolling Sites

CC BY-NC-ND 4.0
Parallax Scrolling: introducción y ejemplos by AlmacenPlantillasWeb is licensed under a Licencia Creative Commons Atribución-NoComercial-SinDerivar 4.0 Internacional.

Trackbacks

  1. Información Bitacoras.com…

    Valora en Bitacoras.com: En el artículo 11 Tendencias de Diseño Web para 2011 incluíamos la técnica Parallax Scrolling como una de las que tendrían más preponderancia durante este año en cuanto a tendencias de diseño web. El uso de parallax s……