Ligero motor de desplazamiento Parallax en Vanilla JavaScript-MagicParallax
| Autor: | arronhunt |
|---|---|
| Views Total: | 2,118 |
| Sitio oficial: | Ir a la web |
| Actualizado: | June 23, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
MagicParallax es una biblioteca de JavaScript ligera que aplica el efecto familiar Parallax a cualquier elemento posicionado relativo basado en la posición actual de desplazamiento de la ventana.
¿Cómo funciona?
Inserte el archivo JavaScript Magic-Parallax. js en su página web.
<script src="js/magic-parallax.js"></script>
Utilice los atributos de datos de HTML5 para establecer el comportamiento de desplazamiento de paralaje para cada elemento como este:
<h1 data-parallax = "true" data-limit = "true" data-start-x = "0.5" data-end-x = "0.5" data-start-y = "0.5" data-end-y = "0.9" data-mid-x = "0.5" data-mid-y = "0.5">Hello World </h1>
Inicializar el MagicParallax y listo.
document.addEventListener('readystatechange', function() {
if (document.readyState === "complete") {
// Initiate parallax
var p = new Parallax();
p.init();
}
});
