Pequeño efecto de desplazamiento Parallax suave en Vanilla JavaScript-scrollar. js

Vista prévia

Descripción

scrollar. js es un plugin de JavaScript vainilla que hace que sea fácil de aplicar un efecto de desplazamiento de paralaje suave en múltiples elementos con diferentes posiciones.

Funciona con los navegadores modernos que soportan rAF y CSS3 transforma.

See also:

• Top 10 bibliotecas de JavaScript para efectos de desplazamiento Parallax

Funcionamiento

Importe la versión minimizada de la biblioteca scrollar. js en el documento.

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

Añade la clase CSS scrollar a tu elemento paralaje y especifica la velocidad de la animación en el atributo Data-scrollar-Speed (soporta números negativos).

<div class="scrollar">

</div>

<div class="scrollar" data-scrollar-speed="2">

</div>

<div class="scrollar" data-scrollar-speed="-2">

</div>

Inicializa la librería scrollar y listo.

var scrollar = new Scrollar();

Configuraciones predeterminadas.

var scrollar = new Scrollar(selector, {


// the parent of scrollar object,


wrapper: null,



// direction of the scroll (supports only vertical for now)


vertical: true, // horizontal: true,



// speed of the blocks (data-scrollar tags override this config)


// movement value to 1px scroll (e.g. 0.6 : 1 means the element will scroll 0.6px when the window is scrolled 1px)


speed: 0.6,



// amount of travel until stop (in px)


// prevent extra scrolling


distance: 1000,



// callback when element is moved


callback: null
});