Animaciones en desplazamiento personalizables con JavaScript y Animate. CSS-Animate. js

Vista prévia

Descripción

Animate. js es una biblioteca de JavaScript pura que aplica Animate. CSS animaciones de CSS3 frescas basadas en elementos DOM cuando se desplazan a la vista. Totalmente personalizable y fácil de implementar.

¿Cómo funciona?

Cargue el Animate. CSS y Animate. js requeridos en la página HTML.

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

Agregue el atributo ' Data-Animate ' al elemento de destino que desee animar cuando se vuelva visible en la pantalla. Y luego especifique el tipo de animación usando el atributo ' Data-Animation-classes ' como se indica a continuación. Puede encontrar todos los tipos de animaciones disponibles aquí .

<div class="element js-animated" data-animate data-animation-classes="animated jello"></div>

Inicialice Animate. js con las opciones predeterminadas y ya terminamos.

var animate = new Animate({


// options
});

animate.init();

Opciones posibles con valores predeterminados.

var animate = new Animate({



// Class to be added to element once animation has completed.


animatedClass: 'js-animated',



// Percentage of element that needs to be in the viewport before the animation triggers.


offset: 0.5,



// Milisecond delay before animation is added to element in view.


delay: 0,



// Element/s to target. Once this element is in view, add animations.


target: '[data-animate]',



// Whether animation classes should removed when the animations complete.


remove: true,



// Once the element has left the top of the viewport (by the same offset), remove the animations from element.


 // When the element comes back into view, it will animate again.


reverse: false,



// Animate any elements that a user has already scrolled past on load.


 // This will only trigger if the onLoad option (see below) is true.


scrolled: false,



// Debugging information in console.


debug: false,



// Whether to fire on DOMContentLoaded.


onLoad: true,



// Whether to fire on scroll.


onScroll: true,



// Whether to fire on resize.


onResize: false,



// Function to determine whether Animate should animate elements.


disableFilter: null,



});

Funciones de devolución de llamada.

var animate = new Animate({



// Function to run once Animate.js initialises


callbackOnInit: function(){},



// When element is in view


callbackOnInView: function(el) {},



// Function to run once animation has completed (pass parameter to access the animated element).


callbackOnAnimate: function(){}

});

Registro de cambios

v1.4.1 (11/03/2018)

• Resuelva las vulnerabilidades

v1.4.0 (10/27/2018)

• Agregar devolución de llamada cuando el elemento está en vista.