Parallax Scrolling
Desplazamiento en Paralaje
El desplazamiento en paralaje ocurre en los sitios web donde la imágen de fondo se mueve a diferente velocidad que el texto en primer plano mientras se hace un desplazamiento. Los enlaces siguientes muestran la diferencia entre un sitio con y sin desplazamiento paralaje.
Sitio con Desplazamiento en Paralaje Sitio sin Desplazamiento en ParalajeNota: El desplazamiento en paralaje no siempre funciona en dispositivos moviles. Sin embargo, se pueden utilizar instrucciones para deshabilitar el efecto en dispositivos moviles.
Como crear el efecto
Uilice un conenedor y agregue una imagen de fondo al contenedor con una altura específica. Luego utilice la propiedad background-attachment: fixed
para crear el efecto de paralaje. La propiedad background-attachment determina si la imágen de fondo permanece fija o si se desplaza
con el resto de la página.
Las demás propiedades para la imagen de fondo se utilizan para centrar y escalar la imágen.
Ejemplo 1. Altura en pixeles.
<!DOCTYPE html>
<html>
<head>
<style>
.parallax {
/* La imágen a utilizar */
background-image: url("parallax1.jpg");
/* Una altura específica */
min-height: 700px;
/* Crear el efecto de desplazamiento de paralaje */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<p>Desplace hacia arriba y abajo para ver el efecto de paralaje.</p>
<div class="parallax"></div>
<div style="height:1000px; background-color:gray; font-size:24px">
<p>Desplace hacia arriba y abajo para ver el efecto de paralaje.</p>
<p>Este div solo está aquí para habilitar el desplazamiento.</p>
<p><b>Tip</b>: Intente quitar la propiedad background-attachment para deshabilitar
el efecto de desplazamiento.
</p>
</div>
</body>
</html>
En este ejemplo se utilizan pixeles para establecer la altura de la imágen. Si lo desea puede utilizar porcentaje para conseguir que la imágen
ocupe toda la pantalla, bastará con establecer la altura del contenedor a 100%. También será necesario establecer la altura de <html>
y <body> al 100%.
Ejemplo 2. Altura en porcentaje.
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100%;
}
.parallax {
/* La imágen a utilizar */
background-image: url("parallax1.jpg");
/* Una altura específica */
min-height: 100%;
/* Crear el efecto de desplazamiento de paralaje */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="parallax"></div>
<div style="height:1000px; background-color:gray; font-size:24px">
<p>Desplace hacia arriba y abajo para ver el efecto de paralaje.</p>
<p>Este div solo está aquí para habilitar el desplazamiento.</p>
<p><b>Tip</b>: Intente quitar la propiedad background-attachment para deshabilitar
el efecto de desplazamiento.
</p>
</div>
<div class="parallax"></div>
</body>
</html>
Algunos dispositivos moviles tienen problemas con background-attachment: fixed. Sin embargo, se pueden utlizar isntrucciones para
deshabilitar el efecto de paralaje en dispositivos moviles.
Ejemplo 3. Deshabilitar el desplazamiento de paralaje en teléfonos y tabletas.
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100%;
}
.parallax {
/* La imágen a utilizar */
background-image: url("parallax1.jpg");
/* Una altura específica */
min-height: 100%;
/* Crear el efecto de desplazamiento de paralaje */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Deshabilita el scroll para telefonos y tabletas. Incremente los pixeles si fuera necesario */
@media only screen and (max-device-width: 1024px) {
.parallax {
background-attachment: scroll;
}
}
</style>
</head>
<body>
<div class="parallax"></div>
<div style="height:100%; background-color:gray; font-size:24px">
<p>Desplace hacia arriba y abajo para ver el efecto de paralaje.</p>
<p>Este div solo está aquí para habilitar el desplazamiento.</p>
<p><b>Tip</b>: Intente quitar la propiedad background-attachment para deshabilitar
el efecto de desplazamiento.
</p>
</div>
<div class="parallax"></div>
</body>
</html>
La regla @media se utiliza para definir reglas de estilo para diferentes dispositivos multimedia.
En CSS2 esto se llamaba tipos multimedia, ahora en CSS3 se les llama consultas multimedia.
Las consultas multimedia obtienen las capacidades del dispositivo, y pueden ser utilizadas para muchas cosas como:
-
Alto y ancho de la ventana de visualización.
-
Alto y ancho del dispositivo.
-
Orientación (modo vertical u horizontal del telefono/tableta).
-
Resolución.
El atributo max-device-width establece el ancho máximo del dispositivo, tal como una computadora.
Ejemplo 4. Ejemplo completo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body, html {
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #777;
}
.bgimg-1, .bgimg-2, .bgimg-3 {
position: relative;
opacity: 0.65;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bgimg-1 {
background-image: url("parallax1.jpg");
min-height: 100%;
}
.bgimg-2 {
background-image: url("parallax2.jpg");
min-height: 400px;
}
.bgimg-3 {
background-image: url("parallax3.jpg");
min-height: 400px;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
h3 {
letter-spacing: 5px;
text-transform: uppercase;
font: 20px "Lato", sans-serif;
color: #111;
}
/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
.bgimg-1, .bgimg-2, .bgimg-3 {
background-attachment: scroll;
}
}
</style>
</head>
<body>
<div class="bgimg-1">
<div class="caption">
<span class="border">Desplace hacia abajo</span>
</div>
</div>
<div style="color: #777;background-color:white;text-align:center;padding:50px 80px;text-align: justify;">
<h3 style="text-align:center;">Ejemplo de Parallax</h3>
<p>
Parallax scrolling is a web site trend where the background content is moved at a different speed than
the foreground content while scrolling. Nascetur per nec posuere turpis, lectus nec libero turpis nunc
at, sed posuere mollis ullamcorper libero ante lectus, blandit pellentesque a, magna turpis est sapien
duis blandit dignissim. Viverra interdum mi magna mi, morbi sociis. Condimentum dui ipsum consequat
morbi, curabitur aliquam pede, nullam vitae eu placerat eget et vehicula. Varius quisque non molestie
dolor, nunc nisl dapibus vestibulum at, sodales tincidunt mauris ullamcorper, dapibus pulvinar, in in
neque risus odio. Accumsan fringilla vulputate at quibusdam sociis eleifend, aenean maecenas vulputate,
non id vehicula lorem mattis, ratione interdum sociis ornare. Suscipit proin magna cras vel, non sit
platea sit, maecenas ante augue etiam maecenas, porta porttitor placerat leo.
</p>
</div>
<div class="bgimg-2">
<div class="caption">
<span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">
LESS HEIGHT
</span>
</div>
</div>
<div style="position:relative;">
<div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
<p>Scroll up and down to really get the feeling of how Parallax Scrolling works.</p>
</div>
</div>
<div class="bgimg-3">
<div class="caption">
<span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">
SCROLL UP
</span>
</div>
</div>
<div style="position:relative;">
<div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
<p>Scroll up and down to really get the feeling of how Parallax Scrolling works.</p>
</div>
</div>
<div class="bgimg-1">
<div class="caption">
<span class="border">
COOL!
</span>
</div>
</div>
</body>
</html>