El parallax scrolling es una tendencia que se ha ido popularizando poco a poco. En el último año ha ido ganando más popularidad y muchos sitios han empleado las ventajas que ofrece el parallax scrolling. Si se combina con gráficos e ilustraciones o animaciones simples, podemos tener como resultado un sitio web bastante interactivo y, lo mejor de todo, ligero y con un tiempo de respuesta promedio.
En este artículo te listamos algunos ejemplos de paginas web que emplean el parallax scrolling. Esperamos que te sirvan como material de referencia la próxima vez que quieras implementar este efecto en tu sitio web.
Eric Huguenin
Este diseñador de videojuegos y desarrollador web no sólo ha incluido el ya famoso efecto parallax sino que también ha incluido fotografías impresionantes e ilustraciones. Cada sección posee un fondo distinto, en ocasiones se usan imágenes y en otras se usan colores planos.
Galápagos: Ecuador ama la vida
Este sitio posee ilustraciones de estilo Low Poly, pero debido a cómo se han colocado los polígonos y el color que se le ha asociado, tiene un efecto 3D. Cada vez que nos desplazamos hacia abajo con el ratón, el texto aparece y pasamos a otros escenarios. Se emplea el parallax scrolling horizontal y ciertos elementos se encuentran siempre en movimiento.
Social King
Este sitio emplea y maximiza el parallax scrolling pues agrega simples animaciones y emplea bastante la pespectiva para dar la sensación de 3D. Como resultado tenemos un sitio ligero y bastante interactivo.
Anatomy at 1220
En este sitio el texto se sincroniza mientras bajamos con el ratón, de modo que podemos ver una animación simple de cómo el texto se va colocando en su sitio respectivo. Cada sección está diferenciada por una fotografía distinta, aunque todas siguen la misma temática.
Parallaxis
Al igual que Anatomy at 1220 presenta simples animaciones cuando nos desplazamos con el ratón. Posee un pequeño menú lateral en la parte derecha que nos indica cuántas secciones tiene el sitio. Se emplea una paleta de colores en blanco y negro
Have you met Janet
Este portafolio presenta fotografías en blanco y negro y mientras nos desplazamos hacia abajo van apareciendo rectángulos amarillos, que van de lado a lado en la pantalla. Estos rectángulos contienen información sobre la diseñadora.
Pressels
Este sitio hace uso del parallax scrolling para contar una breve historia de la marca y definir los beneficios de su producto. Se emplean animaciones sencillas y aunque el fondo no varía, se pueden distinguir bien las secciones pues la información se encuentra bien organizada.
Alquimia WRG
Este sitio emplea el parallax scrollin para simular un ambiente del espacio exterior. Los elementos que se encuentran alineados a la derecha e izquierda se mantienen estáticos, sólo el centro se mueve mientras nos desplazamos con el ratón.
The Royal British Legion
Este sitio contiene ilustraciones en estilo flat así como animaciones sencillas que se aplican en el fondo. Los gráficos son cautivantes, cada sección se encuentra bien definida por una ilustración distinta, aunque el estilo se mantiene. Asimismo, se presenta una información mínima, suficiente para entender de qué trata el sitio y apreciar las ilustraciones.
AdSempre
Este sitio emplea fotografías para cada sección y les aplica filtros de diferentes colores. Posee efectos simples que se activan cuando nos desplazamos hacia abajo, de modo que vemos como el texto y demás elementos se van alineando en la página.
Putzengel
Este sitio complementa las fotografías con fondos que parecen haber sido trabajados en papel. Se usa el parallax scrolling para activar las diversas animaciones del sitio, incluso pasar a otra sección es bastante divertido en esta sección pues el cambio se realiza de manera gradual (usualmente usando una animación como un pequeño intermedio).
Space Needle
Sitio que le rinde tributo a la Aguja Espacial de Seattle. Mediante este sitio podemos subir a esta icónica torre mientras nos aparecen datos y detalles de este lugar. Ya que empezamos desde abajo, tenemos que desplazarnos con el ratón hacia arriba y seguir hasta alcanzar la cima.
Madwell
Este sitio muestra su portafolio mediante el uso del parallax scrolling. En ciertas imágenes se hace uso de la perspectiva para dar profundidad a ciertas imágenes, generando un efecto 3D.
Von Dutch
Esta marca cuenta la historia del fundador mediante el uso de parallax scrolling. Cada sección está bien definida y posee un diseño distinto. Se hacen uso de imágenes trabajadas en Photoshop, fotografías e incluso ilustraciones.
Mario Kart Wii Experience
Este sitio de Nintendo es bastante interactivo y nos movemos de forma horizontal, aunque no del todo, pues se sigue la línea de una pista de carreras que tiene curvas y demás. Se emplean a los personajes del juego y debido a la perspectiva de ciertos elementos se logra un efecto en 3D.
Green Man
Este sitio es bastante interactivo, en su página de inicio presenta una simpática ilustración que se encuentra animada. También podemos encontrar videos y notorios enlaces internos.
Soleil Noir 2012
Este sitio emplea círculos de colores en la parte lateral derecha que sirven para que el usuario pueda navegar en la página. Se emplean ilustraciones coloridas y animaciones sencillas.
La Moulade
Esta página posee parallax scrolling horizontal y en base a esto genera animación y movimiento en su página, sin mencionar que se emplean muchas líneas inclinadas. También se usan colores vibrantes e incluso sonidos.