El efecto Parallax es la nueva tendencia entre los diseñadores web, una tendencia cada vez más extendida en el mundo del diseño. Aunque su nombre parezca complejo, su concepto es sencillo. Básicamente, la imagen o la textura que se encuentra como fondo de pantalla se desplaza más lento que el resto del sitio web.

Aunque podamos creer que no, lo hemos visto mil veces: 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.

El efecto Parallax empezó a ser muy útil ante la caída en desuso de Flash y el auge del diseño plano, en el que permitía dotar a las web de cierto dinamismo y contrarrestar la planitud. Además, los dispositivos móviles fomentan la verticalidad del diseño web por lo que el efecto de Parallax es más que interesante para aportar valor al tedioso scroll y sorprender al usuario con algo que no se espera. Y encima aumenta la usabilidad.

Aunque este efecto parece que es muy novedoso, el Parallax es en realidad un truco con mucha historia, inventado por Disney para dotar a sus películas de dibujos animados de una ligera sensación de tridimensionalidad, intentando lograr con ello un mayor realismo.

Por otro lado, las animaciones CSS3 permiten darle movimiento a cualquier elemento en pantalla, permitiéndote crear loops o efectos de transición que hacen que la web se vea bastante elegante.

Tan importante es el diseño y la usabilidad que queríamos estar al día de las nuevas tendencias y novedades y por eso quisimos hacer el workshop de “Diseñar efectos cool (parallax y otros)” que nuestros diseñadores Toni Camí y Jorge López nos enseñaron.

Presentación para descargar: DISEÑAR EFECTOS COOL PARALLAX Y OTROS

Con HTML5 de CSS3 es suficiente para crear la ilusión de profundidad que proporciona un Parallax. Si te gusta ese código existen tutoriales online como el de Pixel Acres o el de Tuts+.