Efecto simple de desplazamiento Parallax con Pure CSS3
| Autor: | chasmani |
|---|---|
| Views Total: | 7,459 |
| Sitio oficial: | Ir a la web |
| Actualizado: | December 5, 2014 |
| Licencia: | MIT |
Vista prévia
Descripción
Implemente un simple efecto de desplazamiento de paralaje en su página web usando CSS3 Transform y Perspective propiedades.
Uso básico
El HTML.
<div class="parallax"> <div class="parallax_layer parallax_layer_back"> <img class="backgroundImage" src="parallax.jpg"> </div> <div class="parallax_layer parallax_layer_base"> <div class="title">Title</div> <div class="content">Content area</div> </div> </div>
El núcleo CSS3 para el efecto de desplazamiento paralaje.
.parallax {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 1px;
-webkit-perspective: 1px;
}
.parallax_layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax_layer_base {
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
.parallax_layer_back {
transform: translateZ(-1px);
-webkit-transform: translateZ(-1px);
} El CSS3 para la corrección de profundidad.
.parallax_layer_back { transform: translateZ(-1px) scale(2); }
.parallax_layer_deep { transform: translateZ(-2px) scale(3); }
