Ejemplo de efecto parallax mediante propiedades de background

Ejemplo de efecto parallax mediante propiedades de background

Print Friendly, PDF & Email
Valora esta entrada

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.

Efecto parallax con css
Efecto parallax con css

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:

  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>

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!

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.