Efecto de desplazamiento Parallax de alto rendimiento en JavaScript puro-Vanilla-Parallax. js

Vista prévia

Descripción

Vanilla-Parallax.js is a pure vanilla JavaScript library which lets you apply high performance, hardware accelerated and responsive parallax scrolling effects to web content.

Funcionamiento

Incluya tanto Vanilla-Parallax. js como Vanilla-Parallax. CSS en la Página Web.

<link rel="stylesheet" href="vanilla-parallax.css">
<script src="vanilla-parallax.min.js"></script>

Añada sus imágenes de paralaje a un contenedor utilizando atributos para- de la siguiente manera:

• para-height: altura del recipiente
• para-Speed: La velocidad y la dirección en la que el paralaje animado. Los valores negativos animarán el "bloque" hacia arriba al desplazarse hacia abajo en la página. La inversa se aplica a los valores positivos. Se permiten todos los valores excepto 0. Si se ha seleccionado 0, se aplicará el valor predeterminado.
• para-Image: ruta a la imagen de paralaje.

<div class="para-container" para-height="50vh">

<div class="para-block" para-speed=-1.0 para-image="bg.jpg"></div>
</div>

También puede aplicar el efecto de desplazamiento de paralaje a los contenedores de destino y bloques como este:

vp.init({

container : {


class : 'para-container',


height : '333px',


heightSuffix : 'px'

},

block : {


class : 'para-block',


speed : -1,


mediatype: image, // image, video or none


mediapath: "bg.jpg", // pat to file


mute: false

}
});

Registro de cambios

v1.1.3 (08/29/2018)

• el esparcidor reemplazado con for-loop para el soporte del navegador