Efecto de desplazamiento de paralaje CSS3
| Autor: | Jobayer-Ahmed |
|---|---|
| Views Total: | 3,281 |
| Sitio oficial: | Ir a la web |
| Actualizado: | July 31, 2017 |
| Licencia: | MIT |
Vista prévia
Descripción
Un efecto de desplazamiento de paralaje suave y multiplataforma implementado en CSS puro & las transformaciones CSS 3.
Funcionamiento
Añada la imagen de paralaje & contenido a la Página Web.
<div class="container"> <div class="herounit"> <img src="parallax.png" alt="Main Image" class="heroimg"> <div class="title"> Parallax Text Here </div> <div class="herotext"> <h1>More Content Here</h1> </div> </div> </div>
El CSS principal para aplicar el efecto de desplazamiento paralaje a la imagen & contenido.
.container {
overflow-x: hidden;
overflow-y: auto;
height: 100vh;
-webkit-perspective: 1px;
perspective: 1px;
-webkit-overflow-scrolling: touch;
}
.herounit {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.heroimg {
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
position: relative;
top: calc(((100vh - 51.54vw) / 4) * -2);
}
