Efecto de paralaje configurable simple con JavaScript puro-Parallax-lib
| Autor: | kirillrezanov |
|---|---|
| Views Total: | 1,058 |
| Sitio oficial: | Ir a la web |
| Actualizado: | April 2, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Una biblioteca JavaScript pequeña e independiente que aplica un efecto de desplazamiento de Parallax a imágenes de fondo con velocidad y dirección configurables.
Funcionamiento
Añada una imagen de fondo al contenedor de paralaje.
<div id="hero-header"> <h1>Hello World!</h1> </div>
#hero-header {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-image: url(bg.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: -1;
} Cree una nueva instancia de Parallax y haga. Parámetros posibles:
- elemento : elemento paralaje
- velocidad de : velocidad de animación en segundos
- Dirección: invertir la dirección
window.onload = function() {
var el = document.querySelector("#hero-header");
// Parallax(element, speed, direction)
new Parallax(el, 3, true);
}
