Biblioteca JavaScript para manejar animaciones CSS impulsadas por eventos-coreógrafo. js
| Autor: | christinecha |
|---|---|
| Views Total: | 1,971 |
| Sitio oficial: | Ir a la web |
| Actualizado: | October 2, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
Coreógrafo. js es una biblioteca de JavaScript muy pequeña (~ 2Kb) para el manejo de animaciones CSS complejas que se pueden enlazar a cualquier evento.
¿Cómo funciona?
Importa el principal coreógrafo. js de JavaScript en la Página Web.
<script src="choreographer.min.js"></script>
El coreógrafo se construye con un objeto de configuración con las siguientes claves y valores:
- customFunctions: las claves son nombres de función, los valores son funciones de animación.
- animaciones: una matriz de objetos de configuración de clase Animation.
var choreographer = new Choreographer({
animations: [
{ range: [-1, window.innerWidth], selector: '#box', type: 'scale', style: 'height', from: 100, to: 50, unit: 'vh' },
{ range: [-1, window.innerWidth / 2], selector: '#box', type: 'scale', style: 'opacity', from: 0.2, to: 1 },
{ range: [window.innerWidth / 2, window.innerWidth], selector: '#box', type: 'change', style: 'backgroundColor', to: '#00c9ff' },
]
}) Adjuntar un evento a las animaciones.
window.addEventListener('mousemove', function(e) {
choreographer.runAnimationsAt(e.clientX)
})
