gradient

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/

Angel Mavare

Apasionado por la tecnología y los medios digitales, Ingeniero de software, programador, aficionado a la ilustración y co-fundador de pixonauta.com.

Editado el: 11 abril, 2022
Suscribirse
Notificar a
guest

5 Comentarios
Más antiguo
El mas nuevo Más votado
Inline Feedbacks
Ver todos los comentarios
jose
jose
3 years ago

Cómo puedo un menu fijo en la parte superior o lateral dentro del parallax ?

Alejandro Peñaloza
2 years ago

Excelente ejemplo!!! Mil gracias

Marcos
Marcos
1 year ago

Hola, como puedo sacarlo de la caja container? Esque me sale como si fuera un iFrame dentro de un cuadro con scroll.
Saludos.