Cómo animar durante el desplazamiento con JavaScript puro

() translation by (you can also view the original English article)

Hacer que los elementos aparezcan según su posición de desplazamiento es una opción de diseño muy popular al crear páginas web, pero normalmente implica el uso de un plugin o una biblioteca.

En este tutorial, aprenderás cómo implementar animaciones durante el desplazamiento utilizando CSS y JavaScript puro. La principal ventaja al usar una implementación personalizada (a diferencia de una biblioteca) es que nos permite optimizar nuestras funciones para la accesibilidad y el rendimiento.

Demostración de la animación durante el desplazamiento

Aquí se muestra un ejemplo de cómo funciona la animación de los elementos al desplazarnos:

Nuestra implementación depende de CSS para las animaciones y de JavaScript para controlar la activación de los estilos necesarios. Empezaremos creando el diseño.

1. Definir la estructura de la página

Vamos a crear el diseño de nuestra página con HTML y luego asignaremos un nombre de clase común a los elementos que queremos animar en el desplazamiento. Este nombre de clase es al que nos dirigiremos en JavaScript.

En la demostración anterior, a los elementos se les asignó el nombre de clase js-scroll, por lo que el HTML se parecerá a esto:

<header>
  <!--this is where the content of the header goes-->
</header>
<section class="scroll-container">
    <div class="scroll-element js-scroll">
    </div>
    <div class="scroll-caption">
      This animation fades in from the top.
    </div>
</section>

2. Estilizar con CSS

CSS realiza gran parte del trabajo pesado, pues determina el estilo de la animación de cada elemento. En este caso, animaremos los elementos con el nombre de clase scrolled.

Este es un ejemplo de una animación simple con efecto fade-in (aparición gradual):

.js-scroll {
  opacity: 0;
  transition: opacity 500ms;
}

.js-scroll.scrolled {
  opacity: 1;
}

Con este código, cualquier elemento js-scroll en la página se oculta con una opacidad de 0 hasta que se le aplica el nombre de la clase scrolled.

3. Elegir los elementos objetivo con JavaScript

En cuanto tengamos nuestro diseño y estilos, crearemos las funciones de JavaScript para asignar el nombre de la clase a los elementos cuando se desplacen a la vista. También vamos a desvanecer los elementos en JavaScript en lugar de CSS, ya que queremos que los elementos sean visibles en caso de que un navegador no tenga JavaScript habilitado.

Desglosaremos la lógica así:

Obtener todos los elementos js-scroll de la página
Desvanecer los elementos
Detectar cuando el elemento está dentro de la ventana gráfica
Asignar el nombre de la clase scrolled al elemento si está a la vista.

Elegir los elementos objetivo de la página

Elegiremos todos los elementos js-scroll de la página usando el método document.querySelectorAll(). De esta forma:

1	const scrollElements = document.querySelectorAll(".js-scroll");

Desvanecimiento de los elementos

Primero, necesitamos eliminar opacity:0 para .js-scroll en nuestro CSS. Luego incluimos esta línea en nuestro JavaScript:

1	scrollElements.forEach((el) => {
2	el.style.opacity = 0
3	})

Esto permite que los elementos tengan su estilo predeterminado si JavaScript está deshabilitado en el navegador.

Detectando cuando un elemento está a la vista

Podemos detectar cuándo un elemento está a la vista del usuario determinando si la distancia del elemento desde la parte superior de la página es menor que la altura de la parte visible de la página.

En JavaScript, utilizamos el método getBoundingClientRect().top para obtener la distancia de un elemento desde la parte superior de la página, y window.innerHeight o document.documentElement.clientHeight para obtener la altura de la ventana gráfica.

Fuente: Element.getBoundingClientRect () - API web | MDN

Crearemos una función elementInView usando la lógica anterior:

const elementInView = (el) => {
  const elementTop = el.getBoundingClientRect().top;

  return (
    elementTop <= (window.innerHeight || document.documentElement.clientHeight)
  );
};

Podemos modificar esta función para detectar cuándo el elemento se ha desplazado x píxeles en la página, o detectar cuándo se ha desplazado un porcentaje de la página.

const elementInView = (el, scrollOffset = 0) => {
  const elementTop = el.getBoundingClientRect().top;

  return (
    elementTop <= 
    ((window.innerHeight || document.documentElement.clientHeight) - scrollOffset)
  );
};

En este caso, la función devuelve true si el elemento se ha desplazado por la cantidad de scrollOffset en la página. Al modificar la lógica nos da una función diferente para dirigirnos a los elementos en función del porcentaje de desplazamiento.

const elementInView = (el, percentageScroll = 100) => {
  const elementTop = el.getBoundingClientRect().top;

  return (
    elementTop <= 
    ((window.innerHeight || document.documentElement.clientHeight) * (percentageScroll/100))
  );
};

Un beneficio adicional de una implementación personalizada es que podemos definir la lógica para adaptarse a nuestras necesidades específicas.

Nota: Es posible utilizar la API Intersection Observer para lograr el mismo efecto; sin embargo, al momento de escribir este artículo, Intersection Observer no es compatible con Internet Explorer, por lo que no se adapta a nuestro objetivo de que «funcione en todos los navegadores».

Asignar el nombre de clase al elemento

Ahora que podemos detectar si nuestro elemento se ha desplazado a la página, necesitaremos definir una función para controlar la visualización del elemento; en este caso, mostramos el elemento asignando el nombre de clase scrolled.

1	const displayScrollElement = (element) => {
2	element.classList.add("scrolled");
3	};

Luego combinaremos nuestra lógica con la función de visualización y usaremos el método forEach para llamar a la función en todos los elementos js-scroll.

const handleScrollAnimation = () => {
  scrollElements.forEach((el) => {
    if (elementInView(el, 100)) {
      displayScrollElement(el);
    }
  })
}

Una función opcional es restablecer el elemento a su estado predeterminado cuando ya no esté a la vista. Podemos hacer eso definiendo una función hideScrollElement e incluyéndola en una declaración else a nuestra función anterior:

const hideScrollElement = (element) => {
  element.classList.remove("scrolled");
};

const handleScrollAnimation = () => {
  scrollElements.forEach((el) => {
    if (elementInView(el, 100)) {
      displayScrollElement(el);
    } else {
      hideScrollElement(el);
    }
  })
}

Por último, pasaremos el método anterior a un detector de eventos de desplazamiento en la ventana para que se ejecute cada vez que el usuario se desplace.

1	window.addEventListener('scroll', () => {
2	handleScrollAnimation();
3	})

JavaScript

Introducción a los event listeners de JavaScript para diseñadores web

Anna Monus

¡Y listo!, hemos implementado todas las funciones que necesitamos para animar durante el desplazamiento.

Podemos ver cómo funciona la lógica en esta demostración:

El código completo de JavaScript se ve así:

const scrollOffset = 100;

const scrollElement = document.querySelector(".js-scroll");

const elementInView = (el, offset = 0) => {
  const elementTop = el.getBoundingClientRect().top;

  return (
    elementTop <= 
    ((window.innerHeight || document.documentElement.clientHeight) - offset)
  );
};

const displayScrollElement = () => {
  scrollElement.classList.add('scrolled');
}

const hideScrollElement = () => {
  scrollElement.classList.remove('scrolled');
}

const handleScrollAnimation = () => {
  if (elementInView(scrollElement, scrollOffset)) {
      displayScrollElement();
  } else {
    hideScrollElement();
  }
}

window.addEventListener('scroll', () => {
  handleScrollAnimation();
})

El código CSS, así:

.js-scroll {
  width: 50%;
  height: 300px;
  background-color: #DADADA;
  transition: background-color 500ms;
}

.js-scroll.scrolled {
  background-color: aquamarine;
}

4. Más animaciones con CSS

Veamos la primera demostración nuevamente:

Vemos que los elementos aparecen con distintas animaciones. Esto se hizo asignando diferentes animaciones de CSS a los nombres de las clases. El HTML de esta demostración se ve así:

<section class="scroll-container">
  <div class="scroll-element js-scroll fade-in">
  </div>
  <div class="scroll-caption">
    This animation fades in.
  </div>
</section>
<section class="scroll-container">
  <div class="scroll-element js-scroll fade-in-bottom">
  </div>
  <div class="scroll-caption">
    This animation slides in to the top.
  </div>
</section>
<section class="scroll-container">
  <div class="scroll-element js-scroll slide-left">
  </div>
  <div class="scroll-caption">
    This animation slides in from the left.
  </div>
</section>
<section class="scroll-container">
  <div class="scroll-element js-scroll slide-right">
  </div>
  <div class="scroll-caption">
    This animation slides in from the right.
  </div>
</section>

Nota: Las clases junto a la clase js-scroll son a las que nos dirigimos en CSS para controlar las diferentes animaciones. En nuestra hoja de estilos CSS, tendremos:

.scrolled.fade-in {
  animation: fade-in 1s ease-in-out both;
}

.scrolled.fade-in-bottom {
  animation: fade-in-bottom 1s ease-in-out both;
}

.scrolled.slide-left {
  animation: slide-in-left 1s ease-in-out both;
}

.scrolled.slide-right {
  animation: slide-in-right 1s ease-in-out both;
}

@keyframes slide-in-left {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-right {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-in-bottom {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

No necesitamos hacer ningún cambio en el código JavaScript, pues la lógica sigue siendo la misma. Esto significa que podemos tener cualquier cantidad de animaciones diferentes en una página sin escribir nuevas funciones.

5. Aumentando del rendimiento con throttle (acelerador)

Siempre que incluimos una función en un scroll listener, esa función es llamada cada vez que el usuario se desplaza por la página. El desplazamiento en una página de 500px puede ocasionar que se llame a una función al menos 50 veces. Si intentamos incluir muchos elementos en la página, puede provocar que nuestra página se ralentice significativamente.

La función throttle al rescate

Podemos reducir el número de veces que se llama a una función con una «función throttle». Es una función de orden superior que llama a la función que se le ha pasado solamente una vez durante un intervalo de tiempo especificado.

Es sobre todo útil con eventos de desplazamiento, pues no necesitamos detectar cada píxel desplazado por el usuario. Por ejemplo, si tenemos una función throttle con un temporizador de 100 ms, la función se llamará solo una vez por cada 100 ms que el usuario se desplace.

Una función throttle se puede implementar en JavaScript de esta forma:

//initialize throttleTimer as false
let throttleTimer = false;

const throttle = (callback, time) => {
    //don't run the function while throttle timer is true
    if (throttleTimer) return;
    
    //first set throttle timer to true so the function doesn't run
    throttleTimer = true;
    
    setTimeout(() => {
        //call the callback function in the setTimeout and set the throttle timer to false after the indicated time has passed 
        callback();
        throttleTimer = false;
	}, time);
}

Podemos modificar nuestro objeto window en el event listener de desplazamiento para que se vea así

1	window.addEventListener('scroll', () => {
2	throttle(handleScrollAnimation, 250);
3	})

Ahora nuestra función handleScrollAnimation se llama cada 250ms mientras el usuario se esté desplazando.

Así es como se ve la demostración actualizada:

6. Mejorando la accesibilidad

El rendimiento no es el único requisito al implementar una función personalizada; también debemos diseñar para la accesibilidad. Diseñar para la accesibilidad significa tener en cuenta las elecciones y circunstancias de los usuarios. Tal vez algunos usuarios no quieran tener animaciones en absoluto, por lo que debemos tenerlo en cuenta.

La media query de movimiento reducido

Podemos hacer eso con la query prefers-reduced-motion y una implementación de JavaScript.

«prefers-reduced-motion [...] se utiliza para detectar si el usuario ha solicitado que el sistema minimice la cantidad de movimiento no esencial» – MDN

Modificando nuestro código anterior, la query se vería así en CSS:

@media (prefers-reduced-motion) {
  .js-scroll {
    opacity: 1;
  }
  .scrolled {
    animation: none !important;
  }
}

Con estas líneas de código, nos aseguramos de que los elementos animados estén siempre visibles y que la animación esté desactivada para todos los elementos.

La query «prefers-reduced-motion» no es completamente compatible con todos los navegadores, por lo que debemos incluir una solución alternativa con JavaScript:

const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");

window.addEventListener("scroll", () => {
  //check if mediaQuery exists and if the value for mediaQuery does not match 'reduce', return the scrollAnimation.
  if (mediaQuery && !mediaQuery.matches) {
    handleScrollAnimation()
  }
});

De esta forma, si el usuario prefiere un movimiento reducido, la función handleScrollAnimation no es llamada en absoluto.

Así es cómo se anima durante el desplazamiento con JavaScript

¡Ahora tenemos una implementación con alto rendimiento y completamente accesible con la función «animar durante el desplazamiento» que funciona en todos los navegadores!

1	.scrolled.fade-in {
2	animation: fade-in 1s ease-in-out both;
3	}
4
5	.scrolled.fade-in-bottom {
6	animation: fade-in-bottom 1s ease-in-out both;
7	}
8
9	.scrolled.slide-left {
10	animation: slide-in-left 1s ease-in-out both;
11	}
12
13	.scrolled.slide-right {
14	animation: slide-in-right 1s ease-in-out both;
15	}
16
17	@keyframes slide-in-left {
18	0% {
19	transform: translateX(-100px);
20	opacity: 0;
21	}
22	100% {
23	transform: translateX(0);
24	opacity: 1;
25	}
26	}
27
28	@keyframes slide-in-right {
29	0% {
30	transform: translateX(100px);
31	opacity: 0;
32	}
33	100% {
34	transform: translateX(0);
35	opacity: 1;
36	}
37	}
38
39	@keyframes fade-in-bottom {
40	0% {
41	transform: translateY(50px);
42	opacity: 0;
43	}
44	100% {
45	transform: translateY(0);
46	opacity: 1;
47	}
48	}
49
50	@keyframes fade-in {
51	0% {
52	opacity: 0;
53	}
54	100% {
55	opacity: 1;
56	}
57	}