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
10 months ago

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