Puro CSS Parallax desplazamiento efecto
| Autor: | JohnrBell |
|---|---|
| Views Total: | 7,985 |
| Sitio oficial: | Ir a la web |
| Actualizado: | March 10, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
Una sencilla solución CSS pura para crear sutiles efectos de paralaje en elementos HTML al desplazarse por la Página Web.
Funcionamiento
Crea un fondo fijo con algún texto de paralaje.
<div id="title" class="section header"> <h1>Some text...</h1> </div>
Configure el efecto de desplazamiento de paralaje en CSS.
html {
height: 100%;
overflow: hidden;
}
body {
margin:0;
padding:0;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
perspective: 1px;
}
.section {
position: relative;
min-height: 100%;
width: 100%;
box-sizing: border-box;
background: 50% 50% / cover;
}
#title {
background-image: url("background.jpg");
background-attachment: fixed;
}
