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
Stellar un plugin jquery para recrear efectos Parallax
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(); }
});
