Creación de animaciones basadas en Scroll con JavaScript puro-ScrollTrigger
| Autor: | terwanerik |
|---|---|
| Views Total: | 3,729 |
| Sitio oficial: | Ir a la web |
| Actualizado: | July 4, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
ScrollTrigger es una librería JavaScript muy pequeña (~ 2Kb minificada) que te permite aplicar animaciones activadas por scroll a cualquier elemento.
El objetivo es agregar ciertas clases CSS a los elementos cuando se desplazan a la vista. Para que puedas crear animaciones con tecnología CSS3 como quieras.
Funcionamiento
Descargue e incluya el ScrollTrigger. js en la página web y ya está listo para ir.
<script src="ScrollTrigger.min.js"></script>
Inicializar el ScrollTrigger y estamos listos para ir.
document.addEventListener('DOMContentLoaded', function(){
ScrollTrigger.init();
}); Establezca las animaciones (estilos CSS) y otras opciones en el elemento que desee animar.
- 200: desencadena la animación en una posición de desplazamiento especificada (200px).
- animateIn: CSS clasificado para ser aplicado cuando el elemento se desplaza en la vista.
- animateOut: las clases CSS que se aplicarán cuando los elementos se desplaza fuera de la vista.
- addHeight: agrega la altura del elemento al desplazamiento de scroll.
- una vez: se asegura de que la animación solo ocurra una vez.
<div data-scroll="200 animateIn animateOut addHeight once"></div>
