Me encuentro desarrollando un proyecto web que requiere un efecto de Parallax entre algunos de sus elementos. Dado que es una web basada en WordPress y ya tiene el Jquery instalado empecé a buscar plugins para reproducir el efecto.
Al final di con un pluggin para Jquery desarrollado por Mark Dalgleish: Stellar.js
Lo puedes conseguir aquí.
jquery Stellar
El plugin de jquery es de muy fácil uso. Solo tenemos que llamar a la función Stellar mediante la línea:
$(window).stellar();
ó
$('#main').stellar();
En el código HTML bastará con añadir unos atributos a las etiquetas que queremos que adopten el comportamiento de Parallax para obtener el efecto deseado.
El hecho de que sea compatible con dispositivos móviles (iOS) le da un valor añadido a esta librería de JS.
Atributos de Stellar.js
<div data-stellar-ratio="2"></div>
Desplazará el elemento CSS a una velocidad distinta a la de la barra de scroll siendo 1 la velocidad de scroll de la barra. Sirve para cualquier posicion: relative, absolute o fixed.
<div data-stellar-background-ratio="0.5"></div>
Sirve para desplazar la imagen de fondo del elemento a una velocidad distinta a la del scroll. Para ratios inferiores a 1 y evitar comportamientos raros, se recomienda asignar la propiedad ‘background-attachment‘ a fixed
Configuración de Stellar.js
A parte de los atributos que se aplican a los elementos que queremos animar, la librería tiene unos parámetros de configuración que regula su comportamiento.
Aquí dejo un resumen:
$.stellar({ // Permitir scroll en ambas direcciones horizontalScrolling: true, verticalScrolling: true, // Alineación global horizontalOffset: 0, verticalOffset: 0, // Actualiza el parallax al recargar o redimensionar el navegador responsive: false, // Selecciona que propiedad se usa para calcular el scroll. // Escoge 'scroll', 'position', 'margin' o 'transform', scrollProperty: 'scroll', // Selecciona que propiedad es usada para posicionar los elementos. // Escoge entre 'position' o 'transform', positionProperty: 'position', // Activa o desactiva los dos tipos de parallax parallaxBackgrounds: true, parallaxElements: true, // Oculta los elementos parallax elements que se muevan fuera de la ventana hideDistantElements: true, // Customiza como se ocultan o se muestran los elementos. hideElement: function($elem) { $elem.hide(); }, showElement: function($elem) { $elem.show(); } });