Aplicar animaciones en cascada a los elementos con JavaScript-CascadeJS

Vista prévia

Descripción

CascadeJS es una biblioteca de animación de JavaScript que permite aplicar animaciones en cascada basadas en CSS3 a cualquier elemento. Puede utilizar esta biblioteca para animar Letras de elementos DOM por letra o elemento por elemento. Actualmente viene con 2 tipos de animación: fadeUp y fadeDown. También puede integrarlo con cualquier biblioteca de animaciones CSS como Animate. CSS.

Instalación

# NPM
$ npm install cascadejs

# Bower
$ bower install cascadejs

¿Cómo funciona?

Incluya los archivos JavaScript y CSS de CascadeJS en la página HTML.

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

Especifique el elemento de destino que desea animar.

var element = document.getElementsByTagName('h1');

Anime la letra de texto completo H1 por letra.

var cascade = new Cascade(element).flow();

Opciones posibles para personalizar la animación en cascada:

var cascade = new Cascade(element).flow({



// tag name to hold the elements


tagName: 'span',



// default CSS class prefixes


// great for custom CSS3 animations


classPrefix: 'cascade char',



// 'fadeUp' or 'fadeDown'


effect: 'fadeUp',



// animation time


totalTime: 0.5,



// animation duration


duration: 1,



// If you've previously called fragment() on this node, set this option to false otherwise the fragmentation will run again and throw an error. Defaults to true.


shouldFragment: true,



// will append a class to the target element after fragmenting.


shouldAppendTargetClass: true,



// target class


targetClass: 'cascade-container'



});