Efecto de desplazamiento de HTML/CSS Parallax puro
| Autor: | jacted |
|---|---|
| Views Total: | 4,375 |
| Sitio oficial: | Ir a la web |
| Actualizado: | September 13, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
Una implementación de CSS sólo de un efecto de desplazamiento de paralaje simple para la imagen de fondo.
Funcionamiento
Envolver el contenido en un área de paralaje.
<section class="parallax parallax-demo"> <div class="container"> <h1>Parallax</h1> </div> </section>
Los estilos de paralaje centrales para hacer que el contenido se desplace por el contenedor con un efecto de paralaje al desplazarse.
section.parallax {
position: relative;
height: auto;
padding: 180px 0px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
section.parallax:after {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.30);
z-index: 100;
content: ' ';
}
section.parallax h1 {
color: #fff;
position: relative;
z-index: 101;
font-size: 48px;
line-height: 1.5;
font-weight: 700;
text-align: center;
text-transform: uppercase;
} Añada una imagen de fondo al contenedor de paralaje.
section.parallax.parallax-demo {
background-image: url("image.jpg");
background-position: 100% 100%;
}
