Animar elementos en el desplazamiento-AnimateMe
| Autor: | scriptex |
|---|---|
| Views Total: | 437 |
| Sitio oficial: | Ir a la web |
| Actualizado: | November 2, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
AnimateMe es una biblioteca de JS moderna para crear animaciones CSS personalizadas en elementos DOM cuando se desplaza a la ventanilla.
Funcionamiento
Instale el AnimateMe.
# Yarn $ yarn add animateme # NPM $ npm install animateme --save
Importe el AnimateMe.
import AnimateMe from 'animateme'; @import 'animateme/dist/animate.me.css';
Inicialice el AnimateMe en el elemento deseado que desea animar.
new AnimateMe('.element'); Eso es todo. Puede aplicar sus propias animaciones CSS al elemento cuando se desplaza a la vista.
.animate-me--in {
/* styles here */
} Posibles opciones personalizables que se pueden pasar a través de JavaScript o datos atributo de la siguiente manera:
<div class="element" data-offset="120" data-animation="your-class"> Element To Animate </div>
// or
new AnimateMe('.element',{
// half of the viewport
offset: 0.5,
// reverse animation
reverse: true,
// default animation class
animatedIn: 'animate-me--in',
// default attributes
offsetAttr: 'data-offset',
animationAttr: 'data-animation',
// enable/disable the plugin on the touch
touchDisabled: true
});
