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:
Las dimensiones reales de una caja, por defecto, no son las que indica el width. Veamos como se calculan y en que nos puede ayudar aprenderlo.
Dado un mismo código html como crearíamos columnas en un documento web utilizando floats versus haciéndolo con inline-block;
Ejemplo dónde se plantean dos estrategias distintas para dar estilos a un en menú horizontal. La primera con inline-block. La segunda con float.
Resumen y ejemplo de aplicación de la propiedad Z-index. Asignatura CSS curso confección y publicación de páginas web.
Ejercicio CSS en el que a partir de una hoja html dada se pide separar al máximo html y css en hojas separadas. Incluye solución.
Observa de forma práctica la diferencia entre el uso de la propiedad display:none y visibility:hidden. Incluye solución.
No hay comentarios