Últimamente he visto muchas páginas web con el efecto de parallax scrolling, como que está de moda y es que se pueden hacer muchas cosas como animaciones en textos en imágenes, utilizando únicamente códigos. Encontré una selección de 25 páginas que lo utilizan de una manera muy creativa. Ya antes había publicado un ejemplo de este efecto de parallax pero aplicado a una fotografía para animarla en un video. Ahora traigo efecto pero aplicados al diseño en páginas web. Pero primero me gustaría explicar qué es y como se logra ese efecto por si alguien lo quiere aplicar en sus diseños. El parallax scrolling es una técnica que permite animar con movimientos todos los elementos de una web, al mismo tiempo o por separado, mientras te desplazas en ella con la barra de desplazamiento o con el tercer botón del mouse. Este efecto se logra colocando todos los elementos de una web por capas, así si quieres mover solo el texto y dejar estático el fondo lo puedes hacer.
Cómo se logra el efecto parallax scrolling
Ese tipo de animaciones se logra colocando algo de código en las páginas. Para crear el efecto básico que es dejar el fondo estático y lo que se mueva sea el texto mientras navegamos de arriba a bajo, se utilizan los atributos data-type y data-speed, algo de CSS y código jQuery. En internet hay una infinidad de tutoriales, pero este que encontré me pareció muy bien explicado y lo mejor es que puedes descargar un archivo para que lo abras en tu computadora y mires como está hecho.
El anterior fue un tutorial de los simples, pero encontré otro en donde literalmente animan todo lo que se ve en una página. Aparecen y desaparecen textos, lo mismo hacen con galerías de imágenes, desvanecen textos, los giran, hacen volar por toda la página, cambian el color de fondo al mismo tiempo que le cambian el color al los textos. Ese tutorial se puede ver en acción directamente en la página, en donde también explican con que código se logra el efecto y lo mejor es que puedes descargar un archivo para que lo abras desde tu computadora y lo edites a tu gusto.
Buenos ejemplos de diseño web con efecto parallax
En la página que encontré vienen 25 ejemplos con ese efecto, pero yo solo hablaré de tres que fueron los que me parecieron los diseño más creativos y el último que no viene en esa selección pero que me parece el mejor de todos. El primer ejemplo de una página italiana de productos textiles. Todo el sitio se navega moviendo el tercer botón del ratón y en todas partes hay un efecto o sucede algo cuando colocas el puntero del ratón sobre un botón. Además de todo eso el diseño es muy elegante e intuitivo. Acá la dirección | [Codetex Group]
El segundo trata sobre un restaurante que se encuentra en Londres y da muchos servicios a los clientes. En esta página puedes navegar arriba, abajo y de izquierda a derecha. No tiene tantos efectos pero las fotos que hay de fondo hacen que la página luzca muy elegante, no exageran en las animaciones pero las transiciones entre las secciones la hacen de una manera muy sutil. Acá dejo la dirección para que entren y le muevan a todo lo que encuentren | [Marco Grill]
La tercera es de una agencia publicitaria en Grecia. En ésta página no sales para nada del home, todo sucede en la primera página, salen del típico diseño cuadrado o rectangular ellos juegan con los rombos como botones, cuando les das clic a uno de ellos, despliegan una animación con el trabajo que ellos hicieron. Acá dejo la dirección para que ustedes mismos vean los efectos | [Mindworks]
Y la última y pero para mi la mejor implementación del efecto parallax scrolling en una página es la de un currículum vítae interactivo, del cual ya había hecho un post pero que traigo de nuevo por que en verdad vale la pena que entren y naveguen entre el. Es una especie de video juego, tienes que ir avanzando, brincando objetos, nadando y mientras lo haces se van desplegando animaciones que contienen datos de la persona. Acá dejo la dirección para que jueguen un rato en ella | [interactive resume of Robby Leonardi]
La entrada 25 diseños de páginas web con parallax scrolling aparece primero en Blog de diseño gráfico roc21.
