Creación de efectos de paralaje básicos mediante las transformaciones CSS3
| Autor: | adam-m-denny |
|---|---|
| Views Total: | 4,735 |
| Sitio oficial: | Ir a la web |
| Actualizado: | August 17, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
Una solución CSS pura para crear el efecto de desplazamiento de paralaje familiar en las imágenes de fondo usando las transformaciones 2D de CSS3 (traducir y escalar).
Funcionamiento
Cree un contenedor que tenga imágenes de fondo de paralaje.
<section id="parallax"> <div class="back"> <h2>Parallax Container</h2> </div> </section>
Los estilos CSS principales.
section {
position: relative;
min-height: 100vh;
box-sizing: border-box;
transform-style: inherit;
overflow: hidden;
}
section .back {
width: 100%;
height: 100%;
background-position: center center;
transform: translateZ(-2px) scale(3);
} Agregue una imagen de fondo al contenedor.
#parallax .back { background-image: url(bg.jpg); }
