Vanilla JavaScript Animation & la biblioteca de aceleración-Gruuvy. js
| Autor: | dusthazard |
|---|---|
| Views Total: | 1,721 |
| Sitio oficial: | Ir a la web |
| Actualizado: | January 27, 2017 |
| Licencia: | MIT |
Vista prévia
Descripción
Gruuvy. js es una biblioteca de JavaScript ligera (4Kb minificada) para crear animaciones rápidas y efectos de aceleración que permiten animar el estilo de un elemento de x a y.
Built-in animation/easing types:
- linear
- easeInQuad
- easeOutQuad
- easeInOutQuad
- easeInCubic
- easeOutCubic
- easeInOutCubic
- easeInQuart
- easeOutQuart
- easeInOutQuart
- easeInQuint
- easeOutQuint
- easeInOutQuint
- easeInSine
- easeOutSine
- easeInOutSine
- easeInCirc
- easeOutCirc
- easeInOutCirc
- easeInBack
- easeOutBack
- easeInOutBack
- easeInElastic
- easeOutElastic
- easeInOutElastic
- easeInBounce
- easeOutBounce
- easeInOutBounce
¿Cómo funciona?
Cargue el siguiente archivo JavaScript en su documento HTML y el Gruuvy. js está listo para su uso.
<script src='gruuvy.js'></script>
Anime un elemento especificado utilizando el método Animate como se muestra a continuación:
- Elem: elemento que se desea animar
- estilo: Estilo CSS para ejecutar la animación en
- Opciones: posibles opciones y devoluciones de llamada
Gruuvy.animate(elem,styles,options);
Todas las opciones posibles y funciones de devolución de llamada.
// time in ms how long the animation will take duration: 450, // aniamtion type style: 'linear', // callback function for when animation is complete callback: false
