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!
¿Te ha gustado esta publicación?
¡Valora sobre 5 estrellas esta publicación!
Todavía no hay votos. Sé el primero en valorar la entrada.
Vaya, parece que hay puntos a corregir
¿Me ayudas a mejorar?
¡Gracias por tu feedback!
Entradas relacionadas:
Dado un mismo código html como crearíamos columnas en un documento web utilizando floats versus haciéndolo con inline-block;
En CSS existen una serie de normas que dan prioridad a las instrucciones que afectan a cada etiqueta html en función de su importancia, grado de especificidad y orden de aparición. Veámoslo.
Síntesis de pseudoelementos y pseudoselectores más usados. ¿Sabes en que se diferencían? ::root, ::before, :firt-child, :not(), ...
Ejercicio css en que dadas varias propuestas de selectores se pide escribir para que html serviría. Incluye solución.
Código CSS explicado paso a paso para crear un menú horizontal con un sub menú vertical. Apuntes de alumno IFCD0110 tutorial CSS.
En internet se encuentra mucho material de gran calidad para aprender lenguajes como html, css, y javascript. ¿Pero todos los pdf sirven?
No hay comentarios