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.Parallax Scrolling nike Parallax Scrolling: introducción y ejemplos

Mario Kart Wii

En Mario Kart Wii utilizan parallax scrolling para crear un microsite para el juego. Parallax Scrolling mario Parallax Scrolling: introducción y ejemplos

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.Parallax Scrolling becks Parallax Scrolling: introducción y ejemplos

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.Parallax Scrolling norway Parallax Scrolling: introducción y ejemplos

Iutopia

En el sitio web Iutopia.com destaca el uso de esta técnica para incluir efectos de profundidad en el eje vertical.Parallax Scrolling iutopia Parallax Scrolling: introducción y ejemplos

Lenovo

En Rapidboot.com se utiliza un efecto similar al del ejemplo anterior para dar una sensación de caída. Parallax Scrolling lenovo Parallax Scrolling: introducción y ejemplos

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. Parallax Scrolling netlash Parallax Scrolling: introducción y ejemplos

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.
Parallax Scrolling rowToThePole Parallax Scrolling: introducción y ejemplos

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.
Parallax Scrolling rastape Parallax Scrolling: introducción y ejemplos

Smokey Bones

En Smokey Bones utilizan esta técnica para las barras de desplazamiento.Parallax Scrolling smokeyBones Parallax Scrolling: introducción y ejemplos

Fuente de los ejemplos: 10 Awesome Parallax Scrolling Sites

Licencia Creative Commons
Parallax Scrolling: introducción y ejemplos por AlmacenPlantillasWeb, a excepción del contenido de terceros y de que se indique lo contrario, se encuentra bajo una Licencia Creative Commons Attribution-Noncommercial-Share Alike 3.0 Spain Licencia.

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……