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.

La secuencia de contenedores html usada es:

1. contenedor de ancho completo y fondo negro cuyo contenido está a limitado a 1080px.
2. contenedor de altura 400px y contiene la imagen de un paisaje con globos.
3. de nuevo contenedor de ancho completo y fondo negro cuyo contenido está a limitado a 1080px.
4. 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>

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!