Ligera vainilla JavaScript Parallax Library-rellax

Vista prévia

Descripción

rellax es una pequeña biblioteca de JavaScript vainilla que proporciona un efecto de desplazamiento de paralaje suave en cualquier elemento DOM.

See also:

• Top 10 bibliotecas de JavaScript para efectos de desplazamiento Parallax

¿Cómo funciona?

Incluya la biblioteca JavaScript rellax en la Página Web.

<script src="rellax.min.js"></script>

Inicialice la librería rellax.

var rellax = new Rellax('.rellax');

Agregue la clase CSS ' rellax ' a cualquier elemento en el que desee aplicar el efecto de desplazamiento paralaje.

<div class="rellax">

I’m slow and smooth
</div>

Personalice la velocidad de desplazamiento utilizando el atributo Data-rellax-Speed (-10 a + 10).

<div class="rellax" data-rellax-speed="6">

I’m slow and smooth
</div>

Centrar elementos de paralaje utilizando Data-rellax-porcentaje atributo:

<div class="rellax" data-rellax-speed="6" data-rellax-percentage="0.5">

I’m slow and smooth
</div>

Establezca la propiedad z-index de los elementos paralaje.

<div class="rellax" data-rellax-speed="6" data-rellax-percentage="0.5" data-rellax-zindex="999">

I’m slow and smooth
</div>

También puede aplicar el efecto de desplazamiento paralaje a través de JavaScript.

var instance = new Rellax('.rellax', {


speed: -2,


center: false,


wrapper: null,


relativeToWrapper: false,


round: true,


vertical: true,


horizontal: false,


callback: function() {positions},
});

Destruye el efecto de desplazamiento de paralaje.

instance.destroy();

Actualice el efecto de desplazamiento de paralaje.

instance.refresh();

Registro de cambios

v1.9.1 (03/29/2019)

• reemplazado lanzar nuevos errores con Console. advierte

v1.8.0 (02/18/2019)

• Añadido "Data-rellax-min" y "Data-rellax-Max", añadido "Range. html".

v1.7.2 (01/06/2019)

• arreglar UMD global Handling

v1.7.0 (10/21/2018)

• cancelAnimation al llamar al método destroy

v1.6.1 (05/31/2018)

• Correcciones de errores y mejoras de rendimiento