Jquery stellar

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(); }
 });