Animación de elementos visibles en el desplazamiento-Animate. js

Vista prévia

Descripción

Animate. js es una biblioteca de JavaScript que aplica animaciones personalizadas a los elementos a medida que se vuelven visibles en la ventanilla cuando se desplaza.

Funcionamiento

Incluya Animate. js en la Página Web.

<script src="js/dist/animate.js"></script>

Incluya el < a href = "https://daneden.github.io/animate.css/" target = "_ blank" rel = "noopener" > Animate. CSS para las animaciones basadas en CSS3 (opcional).

<link rel="stylesheet" href="/path/to/animate.css">

Agregue el atributo "Data-Animate" requerido a los elementos HTML y use el atributo ' Data-Animation-classes ' para especificar los tipos de animación.

<div data-animate data-animation-classes="animated shake"></div>
<div data-animate data-animation-classes="animated jello"></div>
<div data-animate data-animation-classes="animated wobble"></div>
<div data-animate data-animation-classes="animated rubberBand"></div>
<div data-animate data-animation-classes="animated swing"></div>

Cree una nueva instancia de Animate.

var animate = new Animate({


// options here
});

Inicialice Animate. js.

animate.init();

Todas las opciones posibles y devoluciones de llamada.

{


animatedClass: 'js-animated',


offset: [0.5, 0.5],


delay: 0,


 remove: true, // remove class after completation


scrolled: false, // animate after element has beed scrolled


target: '[data-animate]',


reverse: false,


disableFilter: null, // function to determine whether Animate should animate elements.


onLoad: true,


onScroll: true,


onResize: false,


callbackOnInit: function() {},


callbackOnInView: function() {},


callbackOnAnimate: function() {},
}

Registro de cambios

08/05/2018

• v1.4.0: Options & Callback updated