1 de jun. de 2023 | HTML & CSS

Efectos al hacer scroll con CSS y JavaScript

En este artículo vamos a ver como aplicar efectos al hacer scroll con CSS y JavaScript sin librerías externas.

Los efectos al hacer scroll es una buena forma de darle un toque de elegancia a la presentación de nuestros contenidos para que no se vea todo tan estático. Podemos encontrar librerías muy buenas y completas para realizar este tipo de efectos. Pero si quieres que la performance del proyecto no sufra mucho y solo buscas un par de efectos, lo mejor es hacerlo tu mismo.

Al hacerlo nosotros mismos también, practicaremos JavaScript y CSS, aprenderemos como localizar la posición de elemento HTML al que queremos darle vida y que hacer cuando el scroll llega a el.

Vamos al lio...

Lo primero que vamos a hacer es crear unas clases en CSS que serán los diferentes efectos que vamos a aplicar al elemento HTML.

  
.fadeTop {
  opacity: 0; 
  transform: translate(0, 10vh);
  transition: all 1s;
}

.fadeRight {
  opacity: 0;
  transform: translate(10vh, 0vh);
  transition: all 1s;
}

.fadeLeft {
  opacity: 0;
  transform: translate(-10vh, 0vh);
  transition: all 1s;
}
  

Explico un poco las reglas CSS de arriba, a la propiedad opacity: le asignamos un valor de 0 por que mientras el scroll no llegue al elemento que tenga esa clase lo tenemos "escondido", la propiedad transform: le asignamos un valor translate (X, Y) esto nos permite reponer el elemento HTML a las condenadas que le pasemos como parámetros y con la propiedad transition: con valor all 1s, estamos definiendo la transición entre los diferentes estados de los elementos.

A continuación vamos a crear otra clase con nombre visible.

  
.visible {
  opacity: 1;
  transform: translate(0, 0);
}
  

En la regla para la clase .visible, ponemos como propeidad opacity: con valor 1 (mostramos el elemento) y con la propiedad transform: translate(0, 0), volvemos a colocar el elemto HTML en su sitio original.

Una vez tenemos las clases anteriores preparadas, vamos a localizar el elemento HTML al que queremos aplicar el efecto, para este ejemplo yo voy a usar un elemento con id = scroll-content y a este elemento le voy a aplicar una de las clases anteriores, nunca la clase .visible 😜.

El HTML quedaría de esta manera:

<section id="scroll-content" class="fadeTop">
    <p>Soy una sección con efecto scroll fadeTop 😁</p>
</section>

Bien ahora tenemos que aplicar la magia mediante JavaScript, vamos a aplicar una funcionalidad que consiste en añadir la clase .visible al elemento HTML que queremos aplicarle el efecto cuando el scroll llegue a el y cuando el elemento este fuera de pantalla le quitamos la clase .visible.

Todo esto va a permitir tener un efecto tipo fade en nuestro elemento HTML que va a quedar muy chulo.

Vamos a por el código JavaScript:

window.addEventListener('scroll', function()  {
  let element = document.getElementById('scroll-content');
  let screenSize = window.innerHeight;
  
    if(element.getBoundingClientRect().top < screenSize) {
      element.classList.add('visible');
    } else {
      element.classList.remove('visible');
    }
});

Explico el código de arriba, en la variable element guardamos el elemento HTML al que le vamos a aplicar la clase .visible.

En la variable screenSize, guardamos la altura (en pixeles) del viewport (ventana del navegador).

Con la condición if comprobamos que si la parte superior donde esta colocado nuestro elemento HTML es menor que la altura de la pantalla le aplicamos la clase .visible a nuestro elemento HTML y si no pues le quitamos la clase .visible a nuestro elemento HTML.

Y todo lo anterior se va a ejecutar cada vez que movamos el scroll gracias al evento window.addEventListener que esta esperado a que movamos el scroll para ejecutar la función pasada como parámetro.

Ahora bien ¿Y si queremos aplicarle el efecto a varios elementos de mi HTML?

Vamos a ver como lo podemos a hacer con el siguiente ejemplo.

Este seria el HTML:

<section class="content">
  <div class="scroll-content fadeTop">
    <h2>Fade Top</h2>
  </div>    
</section>
<section class="content">
  <div class="scroll-content fadeRight">
    <h2>Fade Right</h2>
  </div>    
</section>
<section class="content">
   <div class="scroll-content fadeLeft">
    <h2>Fade Left</h2>
  </div>   
</section>

Asignamos la clase .scroll-content a cada elemento HTML que queremos aplicar el efecto junto con su clase de efecto.

Ahora modificamos un poco el código JavaScript:

window.addEventListener('scroll', function()  {
  let elements = document.getElementsByClassName('scroll-content');
  let screenSize = window.innerHeight;
  
    for(var i = 0; i < elements.length; i++) {
      let element = elements[i];

      if(element.getBoundingClientRect().top < screenSize) {
        element.classList.add('visible');
      } else {
        element.classList.remove('visible');
      }
    }
});

En la variable elements guardamos un arreglo con todos los elementos HTML, luego recorremos el arreglo con el bucle for y comprobamos la posición de cada elemento HTML respecto a la pantalla.

Aquí dejo un ejemplo en Codepen:

Bueno pues hasta aquí con este artículo, las posibilidades son infinitas, con CSS podemos crear animaciones, rotar,  escalar etc... y si lo aplicamos al ejemplo anterior podemos crear múltiples efectos y todo esto sin librerías externas, usar librerías externas es una buena opción, pero recomiendo realizar cosas nosotros mismos por que se aprende mucho y te lo pasas genial.

Igualmente recomiendo usar librerías para consultar y destripar su código que también se aprende bastante.

Espero que sirva de ayuda, un saludo y hasta la próxima.

¿Lo haces de otra forma? Escríbelo en los comentarios.

Enlaces

Referencia CSS - https://developer.mozilla.org/es/docs/Web/CSS

Referencia JavaScript - https://developer.mozilla.org/es/docs/Web/JavaScript

Contacta conmigo

Para contactar conmigo, puedes hacerlo accediendo a la pagina de contacto y rellenando el formulario.

También puedes escribirme a traves Twitter.