Imágenes de fondo de CSS puro Parallax
| Autor: | jamesv28 |
|---|---|
| Views Total: | 6,760 |
| Sitio oficial: | Ir a la web |
| Actualizado: | November 15, 2014 |
| Licencia: | MIT |
Vista prévia
Descripción
Una solución CSS extremadamente simple para aplicar efectos de desplazamiento Parallax en sus imágenes de fondo a medida que se desplaza hacia abajo por la Página Web.
Funcionamiento
Cree un conjunto de contenedores para los fondos de paralaje.
<section class="module parallax parallax-1"> <div class="container"> <h1>Section 1</h1> </div> </section> <section class="module parallax parallax-2"> <div class="container"> <h1>Section 2</h1> </div> </section> <section class="module parallax parallax-3"> <div class="container"> <h1>Section 3</h1> </div> </section>
Aplique los efectos de desplazamiento Parallax en estos contenedores usando CSS background propiedades.
section.module.parallax {
height: 600px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
} Agregue las imágenes de fondo a los contenedores.
section.module.parallax-1 { background-image: url("1.jpg"); }
section.module.parallax-2 { background-image: url("2.jpg"); }
section.module.parallax-3 { background-image: url("3.jpg"); }
