Parallax. Tipos e implementación ( I )

NOTA PREVIA: Por lo interesante del tema, pero también por su amplitud, he decidido dividirlo en tres partes. En esta primera, revisamos los tipos de efectos parallax y su implementación. En la segunda, estudiaremos los puntos de adición de efectos y los distintos efectos existentes. Finalmente, en la última, veremos cómo implementar todo esto en WordPress.

Buscando cómo mejorar un theme WordPress, creí necesario implementar un efecto ‘parallax’. Sin embargo, me pareció que antes debía ver cómo lo hacían otros sitios web. Lo que me he encontrado ha sido una diversa tipología de efectos tipo ‘parallax’.

Así pues, he creado esta pequeña clasificación personal de los sistemas de parallax, así como otros elementos que suelen aparecer conjuntamente con dicho efecto, y de paso, vamos a ver cómo funcionan. Por supuesto, estoy abierto a comentarios, sugerencias y críticas (constructivas, eso sí).

 

Primero, ¿qué es el efecto ‘Parallax’?

El parallax ( paralaje en castellano ) es un desplazamiento o diferencia en la posición aparente de un objeto, dependiendo del punto de vista elegido (Wikipedia).

Explicación gráfica del efecto Parallax
Parallax. Lo que se ve varía según la posición del punto de vista.

 

En programación web, este efecto se traduce en que el fondo parece moverse a una velocidad distinta que el contenido, bien por un scroll, bien por la posición del puntero de nuestro ratón. Para ello, debemos superponer distintas capas, que se desplazarán con un movimiento diferenciado.

 

Tipos de efectos

Efecto sencillo. Imagen estática en fondo y capa móvil encima

Efecto sencillo y elegante. Una imagen estática de fondo, que va cambiando según pasan capas opacas por encima mediante el scroll. Es el fundamento del front-page del tema actual de WordPress, ‘Twenty seventeen’.

Un claro ejemplo lo podéis ver aquí.

 

Efecto mejorado. Imagen de fondo no estática

Muy parecido al anterior, aunque la imágen de fondo no es completamente estática, sino que se mueve con el scroll, aunque a una velocidad inferior que la otra capa. Bien trabajado, confiere al resultado elegancia y delicadeza. A mi, personalmente, me encanta.

Mirad este ejemplo de página de bar.

 

Efecto real con scroll. Diversas capas con diversos desplazamientos

Se deben emplear diversas capas que, en el desplazamiento vertical del scroll de la página, se moverán a diferentes velocidades.

Entiendo que este efecto debe estar muy bien asimilado, para que no desoriente en el mensaje que queremos dar a nuestra página.

Sin embargo, se pueden lograr muy buenos resultados, como en este ejemplo.

 

Efecto real con movimiento de ratón

Posiblemente, este sea el efecto ‘Parallax’ más real que existe. Diferentes capas moviéndose en direcciones vertical y horizontal, a diferentes velocidades, en función de la posición del ratón respecto del centro de la imagen.

Sin embargo, creo que este efecto es muy ‘frickie’, pero sin aplicación práctica para una página web seria. Como mucho, para demostrar nuestras habilidades programáticas.

 

Implementación

Efecto sencillo

Para el efecto sencillo, la explicación la podéis encontrar en w3schools.

El funcionamiento es muy sencillo, siendo necesario únicamente un poco de código CSS.

En la creación de la página, simplemente, iremos alternando las div de imágen con las de contenido.

Bien, con este sencillo código, hemos conseguido el efecto parallax simple, el mismo que utiliza el theme WordPress ‘Twenty seventeen’. Pero yo quiero más.

Efecto mejorado

Ahora quiero que el fondo se desplace conjuntamente con el scroll. Para ello, voy a necesitar jQuery. Primero, empezamos con la inclusión del framework jQuery:

Además, debemos incluir un overflow hidden para evitar que, con el desplazamiento, se vea nada donde no se debe ver, es decir, fuera de la div principal. Por otra parte, la capa ‘caption’ con el texto :

También debemos crear un evento jQuery scroll, para que, junto con el movimiento de la página, desplace la imagen:

Finalmente, la estructura HTML:

 

Efecto real con ratón

En primer lugar, debemos indicar que, para crear este efecto, necesitamos imágenes semi-transparentes superpuestas, a cada una de las cuales daremos un desplazamiento diferente, en función del ratón o del scroll.

Por ese motivo, yo he escogido la imagen de la cabecera de este artículo y he creado dos capas con las montañas que en ellas aparecen.

Les hemos de conferir los mismos atributos CSS que a la de fondo:

Además, debemos incluir jQuery como hemos hecho antes, si bien en mi caso ya lo he hecho previamente.

Finalmente, la siguiente función nos averigua la situación del ratón, el ancho de la ventana, y consiguientemente el desplazamiento horizontal respecto del centro de aquella. Dividiendo entre 2 y 4 dicho desplazamiento y aplicándolo a las dos capas superpuestas, conseguimos el efecto deseado.

 

Conclusiones

Hemos visto los fundamentos del parallax, tanto a nivel conceptual como a nivel de programación.

En el próximo artículo, vamos a ver los puntos de adición de efectos, cómo funcionan y qué diferentes tipos existen.

También estoy a punto de sacar una página de ejemplo, en la cual veremos todos los puntos tocados en esta serie de artículos.

2 opiniones en “Parallax. Tipos e implementación ( I )”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *