Parallax en capas
Parallax es un efecto que se suele usar en las páginas web para darles una sensación de profunidad o perspectiva.
Vemos la página como un contexto 3D y damos la sensación de profunidad mediante un eje Z perpendicualr a la pantalla. Sobre ese eje se reparten los planos o capas que queremos mostrar con perspectiva. En la sección de esta web dedicada a CSS3 puedes ver más sobre este efecto.
En este ejemplo vamos a crear un efecto paralax con tres capas: un primer plano, una imagen intermedia y un plano de fondo. Tods ellos se van a desplazar al hacer scroll, pero cada uno a una velocidad distinta: los más cercanos al observador irán más rápidos que los planos lejanos.
Por últoimo, este efecto Parallax no usa praa nada Javascript, solo HTML y CSS.
Código Html
Como usamos tres capas (o tres planos) en nuestra página vamos a crear tres bloques div con las imágenes. No uso un contenedor para el parallas, porque ese contenedor va a ser la página completa.
Las imágenes deben ser grandes para que ocupeen todo el bloque y no pierdan calidad si hubiera que escalarlas para expandirlas. Para la capa del fondo podrías usar también la imagen como background.
<div id="fondo1">
<img src="/como_se_hace/imgs/par_5_p1.png" alt="primer plano"/>
<div class="contenido">Poner aquí el contenido que se quiera mostrar en la página</div>
</div>
<div id="fondo2"><img src="/como_se_hace/imgs/par_5_p2.png" alt="plano medio"/></div>
<div id="fondo3"><img src="/como_se_hace/imgs/par_5_p3.png" alta="fondo"></div>
Si la página ha de tener contenido lo colocas en el bloque con clase contenido. Lo ponemos aquí porque ese contenido está en el primer plano de la página.
El estilo CSS
Esta es la parte que completa la magia del efecto: darle profundidad al cuadro y hacer que el primer plano realmente se vea como más cercano, y al hacer scroll los movimientos relativos de cada capa sea el adecuado: rápido lo cercando lento lo lejano.
@charset "utf-8";
html{
overflow:hidden;
font-family:sans-serif;
}
body{
overflow-y:scroll;
margin:0;
width:100%;
height:100vh;
transform-style: preserve-3d;
perspective: 5px;
}
#fondo1{
position:absolute;
display:flex;
flex-wrap:wrap;
transform: translateZ(0px) scale(1);
z-index: -1;
}
#fondo1 .contenido {
padding:20px;
width:100%;
height:400px; /*Asegurar el scroll para mostrar el efecto */
background:white;
}
#fondo2{
position:absolute;
transform: translateZ(-10px) scale(3);
z-index: -2;
}
#fondo3{
position:absolute;
width:100vw;
min-height:100vh;
transform: translateZ(-20px) scale(5);
z-index: -3;
}
/*Tamaños de imágenes*/
#fondo1 img, #fondo3 img{
width:100vw;
height:50vw;
}
#fondo2 img{
width:100vw;
height: 27vw;
}
Para comenzar usamos overflow-x:hidden para ocultar lo que pueda salirse de pantalla, así evitamos el scroll horizontal en caso de que imágnes o contenidos sean másn achos que la pantalla
El cuerpo de la página va a ser nuestra ventana para observar el panorama con perspectiva o profundidad. Aseguramos el scroll vertical. Ponemos el margin en 0 para llenar la pantalla si queremos.
Ahora hacemos que el cuerpo de la página llne la pantalla con la propiedad height a 100vh. Y definimos al punto del observador con perspective y transform-style.
Una vez hemos definido la ventana del observador le toca el turno a las capas: todas tienen position absolute. Las capas las colocamos y escalamos con la propiedad translate:
- translateZ coloca la capa a más o menos destancia del observador. Si Z = 0 es la pantalla, valores negativos alejan a los objetos, mientras que valores positivos los acercan
- scale() Los objetos lejanos son pequeños para que llenen la pantalla usamos el valor de la escala calculaco como 1 - z/perspective, z incluye su signo.
Por último ajustamos los tamaños de las imágenes al tamaño de la pantalla. Le ponemos sus anchos a 100vw, el 100% del ancho del puerto de visión.
Ya solo queda crear tu páginas con este código para ver el efecto.