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

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

2 thoughts on “Jquery stellar

Deja un comentario

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