Simple fondo Parallax desplazamiento con JavaScript puro
| Autor: | everydayhero |
|---|---|
| Views Total: | 3,595 |
| Sitio oficial: | Ir a la web |
| Actualizado: | June 2, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
Una implementación pura de JavaScript de un simple efecto de desplazamiento paralaje para imágenes de fondo.
Funcionamiento
Cargue el archivo JavaScript necesario en el proyecto.
<script src="parallaxScrolling-1.0.min.js"></script>
Agregue un área de desplazamiento de paralaje a su página web.
<div id="demo"></div>
Los estilos CSS requeridos.
#banner {
...
background-size: cover;
transition: background-position 0.05s linear;
} Pase los parámetros al efecto de desplazamiento de paralaje.
// ID of DOM element. var id = "demo"; // Source of background image. var src = bg.jpg; // Scroll direction can be either "down" or "up". var scrollDir = "down"; // Max number of pixels the background can move vertically. var maxOffset = "auto";
Inicialización.
var parallax = new Parallax(); parallax.init(id, src, scrollDir, maxOffset); var el = document.getElementById(id);
Detectores de eventos.
function parallaxLoad() {
el.style.backgroundPosition = ('0 '+parallax.scroll()+'px');
}
window.addEventListener('scroll', function() {
el.style.backgroundPosition = ('0 '+parallax.scroll()+'px');
});
window.addEventListener('resize', function() {
el.style.backgroundPosition = ('0 '+parallax.resize()+'px');
});
