Elemento entrar/salir animaciones al desplazarse-AnimusJS
| Autor: | soutomario |
|---|---|
| Views Total: | 2,674 |
| Sitio oficial: | Ir a la web |
| Actualizado: | February 22, 2017 |
| Licencia: | MIT |
Vista prévia
Descripción
AnimusJS es una biblioteca de JS independiente que permite animar cualquier elemento mediante animaciones CSS o funciones JS, cuando se desplazan dentro y fuera de la ventanilla.
Install it via package manager:
$ npm install animusjs
Funcionamiento
Importe la biblioteca AnimusJS en el proyecto Web.
<script src="src/animus.js"></script>
Especifique las clases CSS para entrar/salir el estado usando Anim-atributos como sigue:
<div anim-in="active" anim-out="class"> Content here </div>
Inicializar AnimusJS:
animusjs.init();
A continuación, puede animar el elemento mediante las propiedades de animación CSS3:
div.active {
opacity: 1;
transform: translateX(0);
}
div.class {
...
} De forma predeterminada, la biblioteca animará el elemento por clases CSS. También se le permite utilizar las funciones de JavaScript de la siguiente manera:
<div anim-in="active" anim-out="active" anim-type="function"> Content here </div>
function active(element, options) {
if(options.status === 'animate') {
element.classList.add('active');
}
if(options.status === 'reverse') {
element.classList.remove('active');
}
}
