Diseño, Parallax, Web

Efecto Parallax


¿Qué es el Parallax?

Entras en una web, haces scroll y de repente el fondo parece moverse a una velocidad distinta que el contenido, creando un ligero efecto de profundidad y dejando ver partes que antes no veías. Se llama Parallax y es una tendencia cada vez más extendida en el mundo del diseño web. Ante la caída en desuso de Flash y el auge del diseño plano, este recurso es muy útil para dotar a las web de cierto dinamismo y contrarrestar la planitud.

Lo ideal es que aproveches este recurso estético como complemento narrativo, y lo cierto es que el Parallax es perfecto para landing pages, o webs que tengan algo muy concreto que contar en varios pasos.

Aunque parezca una tendencia muy actual, el Parallax es en realidad un truco inventado por Disney para dotar a sus películas de dibujos animados de una ligera tridimensionalidad, intentando lograr con ello un mayor realismo. En este video se explica su funcionamiento:

¿Cómo se hace el efecto Parallax?

Un poquito de HTML5 de CSS3 es suficiente para crear la ilusión de profundidad que proporciona un Parallax. Si te gusta trastear con el código hay un montón de tutoriales online que están muy bien, como el de Pixel Acres o el de Tuts+.

Pero si no quieres complicarte la vida, prueba Parallax.js, una práctica librería de javascript que además detecta la orientación de los dispositivos móviles a través del giroscopio y el acelerómetro, genial.

24 Webs increíbles con Parallax

The Boat
the-boat

Herzblut und Block
herzblutundbock

Melanie Daveid
MELANIE-DAVEID

Giampiero Bodino
giampiero-bodino

Your Time 4yourtime4

Werkstatt
wekstatt

Urban Walks
urban-walks

Sonance Audition
sonance-audition

Social King
socialking

Restaurant Le Duc
restaurant-le-duc

PorchevolutionPORCHEVOLUTION

Parallaxisparallaxis

Nathan Riley
nrly

Melanie. Fmelanie.f

Mas Industriesmas-industries

Marcin Dmochmarcin-dmoch

Lois Jeans SS 15
lois

Laserlaser

L’Amor Foulamorfou

Ideas by Musicideas-by-music

Giaco MorelliGIACO-morelli

Feed Musicfeed-music

Anton & Irene
anton-and-irene

Anakin Studioanakin

Deja un comentario

Tu dirección de correo electrónico no será publicada.