05 Abr Ejemplo de efecto parallax mediante propiedades de background
El parallax es un efecto css por el cual una imagen de fondo o color se quedan fijos a medida que se hace scroll.
Las instrucciones css que lo hacen posible son bastante simples.
El siguiente gif describe el efecto de forma dinámica.

A continuación se describe el código usado para el ejemplo mediante el cual se ha generado el gif.
El código html
La secuencia de contenedores html usada es:
- contenedor de ancho completo y fondo negro cuyo contenido está a limitado a 1080px.
- contenedor de altura 400px y contiene la imagen de un paisaje con globos.
- de nuevo contenedor de ancho completo y fondo negro cuyo contenido está a limitado a 1080px.
- de nuevo contenedor de altura 400px y que contiene la misma imagen que antes.
<div class="container-fluid black">
<div class="container center">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias qui cum deleniti, repudiandae, dolor doloremque nostrum neque necessitatibus sequi est accusamus, eligendi consequuntur cupiditate facere incidunt. Ab, id? Necessitatibus, provident.</p>
</div>
</div>
<div class="container-fluid">
<div class="parallax">a</div>
</div>
<div class="container-fluid black">
<div class="container center">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, explicabo numquam. Officiis ab doloribus debitis facilis libero id quia, laudantium placeat. Obcaecati quis omnis a voluptates rerum alias assumenda fugiat!</p>
</div>
</div>
<div class="container-fluid">
<div class="parallax"></div>
</div>
El código CSS
En el código css hay algunas clases cuyo objetivo es puramente estético. Es el caso de center, black y el color de texto de los párrafos.
En cuanto al efecto que hace posible el parallax fijaros que entre los valores que pueden tomar background-size se encuentra:
- cover; redimensiona la imagen para aseugrar que ocupa el máximo de pantalla posible.
- contain; redimensiona la imagen para que se vea completa.
Y que el truco está en la instrucción background-attachment: fixed;
*{
box-sizing:border-box;
margin:0;
padding:0;
}
p{color:#fff;}
.container-fluid{
width:100%;
}
.container{
max-width:1080px;
width:100%;
margin:auto;
padding:32px;
}
.center{text-align:center;}
.black{background-color:#252525;}
.parallax{
height:500px;
background-image:url('globos.jpg');
background-size:cover;
background-attachment: fixed;
}
¡Hola!
Querido lector,
Si juntamos el html y el css tenemos un bonito efecto parallax.
Puedes descargar el ejemplo completo de publicación en este enlace.
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
Entradas relacionadas:
Qué es la propiedad opacity de css y como podemos usarla. Atención porqué para transaprencias no siempre es la mejor opción.
Ejercicio css dónde se plantea dividr una página en columnas utilizando 2 metodologías distintas. Las 2 importantes. Incluye solución.
Ejercicio de repaso de instrucciones básicas de css. Estiliza etiquetas para que parezcan etiquetas que en realidad no son. Incluye solución.
Ejercicio css en el que se muestra como mostrar logotipos sencillos mediante el uso de paletas de colores adecuadas y tipografías de google fonts.
Para cada propiedad se muestra un ejemplo visual del efecto de un valor positivo o negativo de top, right, bottom y left.
Maquetar con display:table; tiene ventajas frente a las tablas html. A modo de ejercicio se propone una tabla de servicios. Incluye solución.
Antonio Cruz
Posted at 08:31h, 01 agostoMagnífica explicación. Voy a ver si puedo implementarlo en mi web.
gracias