Efecto de desplazamiento Parallax de posición fija con CSS puro
| Autor: | kenyk7 |
|---|---|
| Views Total: | 4,384 |
| Sitio oficial: | Ir a la web |
| Actualizado: | September 3, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
Una solución CSS pura de implementar un efecto de paralaje de posición fija en las imágenes de fondo al desplazarse por la Página Web. Funciona tanto en el móvil como en el escritorio.
Funcionamiento
La estructura HTML para el área de paralaje.
<div class="parrallax-content"> <div class="parrallax"> </div> </div>
Añade un fondo al área de paralaje.
.parrallax-content{
background-image: url(1.jpg);
} Los estilos CSS principales para el efecto de desplazamiento de paralaje.
.parrallax-content{
position: relative;
overflow: hidden;
height: 80vh;
-webkit-background-size: cover;
background-size: cover;
background-attachment: fixed;
background-position: center center;
}
.parrallax {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
.parrallax:before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
z-index: -1;
background-position: center top;
background-repeat: no-repeat;
background-size: 120% auto;
}
