Biblioteca de animación basada en scroll de pequeño rendimiento-sal

Vista prévia

Descripción

sal es una biblioteca de animación de desplazamiento ligera y de alto rendimiento que se usa para animar elementos dentro del documento en el desplazamiento de página.

La biblioteca aplica automáticamente ciertas clases de animación a los elementos deseados cuando una parte específica de los elementos está visible dentro de la ventanilla.

Funcionamiento

Instalar & descargar.

# Yarn
$ yarn add sal.js

# NPM
$ npm install sal.js --save

Importa el sal. js.

// ES 6
import sal from 'sal.js';

// CommonJS:
const sal = require('sal.js');

O incluya el JavaScript compilado & archivos CSS en la página.

<script src="/dist/sal.js"></script>
<link rel="stylesheet" href="/dist/sal.css">

Inicializa la biblioteca sal. js y ya está listo para ir.

sal();

Agregue el atributo Data-sal al elemento de destino y especifique el nombre de la animación que desea usar de la siguiente manera:

• fade
• deslizable
• deslizable
• diapositiva izquierda
• diapositiva derecha
• zoom-in
• alejar
• abatible
• Flip-Down
• Flip-Left
• Flip-Right

<div data-sal="zoom-in">Element To Animate</div>

Establezca la duración, la aceleración y el retardo de la animación.

<div data-sal="zoom-in"


 data-sal-duration="2000"


 data-sal-delay="500"


 data-sal-easing="ease-out-bounce">


 Element To Animate
</div>

Opciones de configuración disponibles.

sal({

rootMargin: '0% 50%',

threshold: 0.5, // 50%

animateClassName: 'sal-animate',

disabledClassName: 'sal-disabled',

selector: '[data-sal]',

once: true, // run only once

disabled: false,
});

Métodos de API que se pueden utilizar para deshabilitar/habilitar la animación de desplazamiento manualmente.

const instance = sal({



// options here
});

instance.enable();
instance.disable();