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í).
Indice
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).
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<style> /* Las clases parallax1 y parallax2 son iguales. Sin embargo, la clase parallax2 se moverá por JavaScript */ .parallax1, .parallax2 { /* Set a specific height */ height: 500px; /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } /* Con las clases fondo1, fondo2, ... definimos las imágenes */ .fondo1 { background-image: url("imagen_1_parallax.jpg"); } </style> |
En la creación de la página, simplemente, iremos alternando las div de imágen con las de contenido.
|
1 2 3 4 5 6 7 8 9 10 |
<div class="parallax1 fondo1"> <div class="caption"> <span class="border">TITULO. Aquí puedes poner el título de lo que viene a continuación.</span> </div> </div> <div> <h3 style="text-align:center;">Este título es opcional</h3> <p>Aquí todo el mundo pone ese texto en latín tan 'chachi'</p> </div> |
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:
|
1 |
<script language="JavaScript" type="text/javascript" src="jquery-2.2.3.min.js"></script> |
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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* Para las div parallax2 necesitamos hacer un hidden overflow */ .parallax2 { overflow: hidden; } /* Y los caption de las parallax2 deben tener z-index y position absolute, para que se vean */ .parallax2 .caption { z-index: 1; position: absolute; } |
También debemos crear un evento jQuery scroll, para que, junto con el movimiento de la página, desplace la imagen:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> // Función para modificar el movimiento de la imagen del background $(document).on("scroll", function(){ // La variable más importante es la de la posición del documento posicion = $(document).scrollTop(); // Para el efecto en el fondo 2 busco su posición fondomovil = $('.fondo2').css('top'); // Modifico su posición scrolled = $( window ).scrollTop(); $('.fondo2').css({"transform":"translate(0px,-" + ( posicion / 4 ) + "px)" }); console.log("translate(0px,-" + ( posicion / 4 ) + "px)" ); }) </script> |
Finalmente, la estructura HTML:
|
1 2 3 4 5 6 |
<div class="parallax2"> <div class="caption"> <span>Aquí podemos poner otro título, o nada</span> </div> <div class="fondo2" style="height:1000px"></div> </div> |
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.
|
1 2 3 4 5 6 |
.fondo3 { background-image: url("imagen_3_1_parallax.jpg");} /* Las capas superpuestas */ .capa1 { background-image: url("imagen_3_2_parallax.png"); } .capa2 { background-image: url("imagen_3_3_parallax.png"); } |
Les hemos de conferir los mismos atributos CSS que a la de fondo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.capa1, .capa2 { /* Debemos especificar los mismos atributos que la capa en la que se encuentran */ height: 500px; /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; overflow: hidden; } |
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.
|
1 2 3 4 5 6 7 8 |
//Función para desplazar horizontalmente las capas en función de la posición del ratón $(document).mousemove(function(event){ var ratonX = event.clientX; var anchoX = $(window).width(); desplazamiento = ( anchoX / 2 ) - ratonX; $('.capa1').css({"transform":"translate(" + ( desplazamiento / 4 ) + "px,0px)" }); $('.capa2').css({"transform":"translate(" + ( desplazamiento / 2 ) + "px,0px)" }); }) |
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 respuesta a “Parallax. Tipos e implementación ( I )”