Efecto de desplazamiento fácil Parallax en Vanilla JavaScript-Parallax-Vanilla
| Autor: | alxv2016 |
|---|---|
| Views Total: | 2,732 |
| Sitio oficial: | Ir a la web |
| Actualizado: | June 18, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Una biblioteca JavaScript libre de dependencias para implementar el efecto de desplazamiento de Parallax en las imágenes de fondo usando requestAnimationFrame () API.
Funcionamiento
Agregue el bloque de paralaje con una imagen de fondo a un contenedor:
<div class="para-container">
<div class="para-block" style="background-image: url('bg.jpg')"> </div>
</div>
</div> El contenedor de paralaje debe tener una altura fija.
.para-container {
overflow: hidden;
height: 220px;
} Los estilos CSS requeridos para el bloque de paralaje.
.para-container .para-block {
width: 100%;
height: 140%;
will-change: transform;
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
} Inicializar la biblioteca de paralaje y listo.
pv.init();
Todos los ajustes predeterminados para personalizar el efecto de paralaje.
pv.init({
container : {
class
: 'para-container',
height
: undefined
},
block : {
class
: 'para-block',
speed
: -Math.PI,
image
: undefined
}
}); Registro de cambios
v1.1.3 (06/19/2018)
- El esparcidor reemplazado con for-loop para el soporte del navegador
