Pequeña herramienta de animación para X & Y transformaciones-movimiento de desplazamiento
| Autor: | whiteboxpub |
|---|---|
| Views Total: | 573 |
| Sitio oficial: | Ir a la web |
| Actualizado: | June 5, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Desplazamiento de movimiento es una pequeña herramienta de animación para X & Y transforma que hace uso de < a href = "https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API" target = "_ blank" rel = "noopener" > intersección observador y < a href = "https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame" target = "_ blank" rel = "noopener" > requestAnimationFrame API para animar elementos en scroll.
Funcionamiento
Cargue el polyfill de IntersectionObserver para aquellos exploradores que no admitan el < a href = "https://w3c.github.io/IntersectionObserver/" target = "_ blank" rel = "nofollow noopener" > IntersectionObserver API.
<script src="intersection-observer.js"></script>
Cargue la biblioteca de scroll Motion al final del documento.
<script src="scroll_motion.js"></script>
Inicializar la biblioteca de movimiento de desplazamiento.
new ScrollMotion()
Agregue las siguientes clases y atributos al elemento que desea animar.
- Scroll-Motion
- Data-Speed-y
- Data-Speed-x
<div class="Scroll-Motion" Data-Speed-y="-2" Data-Speed-x="0">element</div>
Opciones posibles para personalizar la biblioteca.
new ScrollMotion('.Scroll-Motion', {
speedX: false,
speedY: -2,
observe: 1,
visibleAmount: 0
})
