Con el efecto Parallax ( o parallax effect) conseguimos hacer que el fondo de una sección se mueva a una velocidad distinta que su contenido, creando una percepción visual muy interesante y vistosa. Normalmente puede realizarse con javascript utilizando alguna librería como Rellax, o programando de cero.
Pero realmente podemos ahorrarnos las dependencias y callbacks si utilizamos solo CSS, haciendo que nuestro efecto sea bastante ligero y limpio para el navegador.
HTML
Nuestro HTML estará compuesto por lo siguiente. cabe destacar que para formar una sección parallax requerimos de dos secciones; un parallax-bg y un parallax-content:
<div class="container">
<!-- Seccion parallax -->
<section class="parallax-bg" style="background-image: url(https://url-de-la-imagen)"></section>
<section class="parallax-content">
<div>
<h1>Parallax section</h1>
<p>Este texto acompaña al background parallax en su propia sección</p>
</div>
</section>
<!-- Seccion NO parallax -->
<section class="no-parallax-section bg-1">
<div class="no-parallax-content">
<h1>No-parallax section</h1>
<p>En esta sección incluimos la clase "bg-1" para otorgarle un color de fondo.</p>
</div>
</section>
<!-- Seccion parallax -->
<section class="parallax-bg" style="background-image: url(https://url-de-la-imagen)"></section>
<section class="parallax-content">
<div>
<h1>Parallax section</h1>
<p>Este texto acompaña al background parallax en su propia sección</p>
</div>
</section>
</div> <!-- End Container -->
CSS
Las principales clases contenidas aquí son:
- .parallax-content: Es la sección que contiene el texto de nuestro parallax
- .parallax-bg: Es la sección con imagen parallax detrás de nuestro parallax-content.
- .no-parallax-section: Sección sin efecto parallax.
- .no-parallax-content: Texto dentro del parallax-content.
- .bg-1 y .bg-2: clases que contienen nuestros colores de fondo para secciones no-parallax.
Es importante recordar que nuestro contenedor debe tener un tamaño fijo (Por lo general 100vh pero utiliza el que mas te convenga).
/*Estilos generales*/
/*Por lo general tendras estos estilos en tu proyecto*/
html,
body {
background-color: black;
font-family: sans-serif;
}
/*Estilos parallax*/
.container {
height: 100vh;
overflow: hidden;
overflow-y: auto;
perspective: 3px;
}
section {
background-size: cover;
color: white;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.parallax-bg{
background-position: center center;
transform: translateZ(-0.5px) scale(2);
background-size: cover;
z-index: -1;
height: 50vh;
}
.parallax-content{
z-index: -1;
transform: translateY(-25vh) translateZ(0px) scale(1);
padding-left:30px;
padding-right:30px;
text-align:center;
}
.no-parallax-section{
height: 50vh;
}
.no-parallax-content{
text-align:center;
padding:30px;
}
/*Colores de fondo*/
.bg-1{
background:linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(234,38,255,1) 0%, rgba(0,212,255,1) 100%);
}
.bg-2{
background:linear-gradient(90deg, rgba(0,83,33,1) 0%, rgba(215,198,1,1) 100%);
}
Demo de efecto parallax
See the Pen CSS Only parallax by Angel Mavare (@angelmavare) on CodePen.
Espero que haya sido de utilidad para ti. Puedes encontrar más trucos y snippets como este en: https://pixonauta.com/snippets/
Cómo puedo un menu fijo en la parte superior o lateral dentro del parallax ?
Hola Jose!, si requieres colocar un menú dentro de un parallax-section por ejemplo, puedes colocarlo y darle una propiedad de posicionamiento absoluto de esta forma
Excelente ejemplo!!! Mil gracias
Me alegra que te haya sido de utilidad Alejandro
Hola, como puedo sacarlo de la caja container? Esque me sale como si fuera un iFrame dentro de un cuadro con scroll.
Saludos.