Spotify inspirado efecto de desplazamiento Parallax en Vanilla JavaScript-Paraxify. js
| Autor: | jaicab |
|---|---|
| Views Total: | 2,968 |
| Sitio oficial: | Ir a la web |
| Actualizado: | September 3, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Paraxify. js es una biblioteca de JavaScript ligera (3Kb minificada) para implementar el efecto de desplazamiento paralaje en las imágenes de fondo como se ve en Spotify.com. A medida que se desplaza hacia abajo en la página, las imágenes de fondo se desplazan más despacio que el primer plano con una velocidad de animación y un área visible determinada.
Funcionamiento
Inserte el Paraxify. js o Paraxify. min. js en la parte inferior de la Página Web.
<script src="paraxify.js"></script>
Cree un contenedor en el que aplique el efecto de paralaje.
<div class="paraxify hero"> <h1>Paraxify.js Demo</h1> </div>
Los estilos CSS requeridos.
.paraxify {
background-attachment: fixed;
background-position: center center;
background-size: cover;
} Agregue una imagen de fondo al contenedor.
.hero {
height:400px;
background-image: url(hero.jpg);
} Inicialice el Paraxify. js y ya terminamos.
paraxify('.paraxify'); Ajuste la velocidad del desplazamiento de paralaje:
paraxify('.paraxify',{
speed: 1, // 0 - 1
}); Especifique el área visible de la imagen de paralaje para desplazarse.
paraxify('.paraxify',{
boost: 0, // 0 - 1
}); Registro de cambios
09/03/2018
- Corregir problema cuando la imagen es 100vh/%
