Biblioteca AOS (Animate On Scroll): personalizar animaciones es sencillo

No necesitas un framework pesado para crear un sitio bonito e interactivo. Con HTML limpio, CSS moderno
y una ayuda ligera como AOS (Animate On Scroll), podrás lanzar páginas rápidas y atractivas
con una sensación premium sin inflar tu código. Piensa en cuántos sitios ves a diario que se sienten
estáticos, planos y—seamos honestos—un poco aburridos. Ahora imagina tu página de inicio:
incluso un ligero fade, una rotación suave o un slide-in juguetón diferencia tu diseño al instante.
El visitante siente que el sitio está vivo y responde: ese pequeño detalle hace que se detenga y preste atención.

Añadir un toque de animación activada por el desplazamiento transforma por completo la percepción.
De repente, tu maquetación se siente intencional y moderna; tu marca, más pulida; y tu contenido
gana ritmo y fluidez en lugar de apilarse en bloques. ¿Lo mejor? AOS es ligero, facilísimo de instalar
y no requiere dominar un gran framework de JavaScript. Es de esas herramientas donde
diez minutos de trabajo hacen que tu sitio parezca semanas de diseño de movimiento a medida.

Si tu web aún se siente “atascada” frente a la competencia, esta es tu fruta al alcance de la mano.
Integra AOS, prueba un par de animaciones y verás cómo tu portafolio, blog o tienda
empieza a sentirse premium. Date el gusto: ofrece más que información—ofrece una experiencia memorable.

Add CSS to your website header

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

Add JS at the end of body tag

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>  
<script type="text/javascript">
AOS.init({   
});
</script> 

HTML

<div class="box" data-aos="my-animation-1">1</div>
<div class="box" data-aos="my-animation-2">2</div>
<div class="box" data-aos="my-animation-3">3</div>
<div class="box" data-aos="my-animation-1">4</div>
<div class="box" data-aos="my-animation-2">5</div>
<div class="box" data-aos="my-animation-3">6</div>
<div class="box" data-aos="my-animation-1">7</div>
<div class="box" data-aos="my-animation-2">8</div>
<div class="box" data-aos="my-animation-3">9</div> 

CSS

/* Default Style of Boxes */
.box {
  width: 250px;
  height: 250px;
  margin: 2rem auto; 
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family:sans-serif;
  font-size: 5rem;
  color: #FFF;
}
 
/* Before of Animation 1 */
[data-aos="my-animation-1"] {
  transform: rotate(0deg);
  background: black;
  opacity: 0; 
}
/* After of Animation 1 */ 
[data-aos="my-animation-1"].aos-animate {
  transform: rotate(360deg); 
  opacity: 1; 
}
	
/* Before of Animation 2 */
[data-aos="my-animation-2"] {
  background: black;
  transition-property: background; 
}
/* After of Animation 2 */
[data-aos="my-animation-2"].aos-animate {
  background: cyan; 
}
	
/* Before of Animation 3 */
[data-aos="my-animation-3"] {
  transform: translateX(-100%);
  opacity: 0; 
}
/* After of Animation 3 */
[data-aos="my-animation-3"].aos-animate {
  transform: translateX(0%); 
  background: purple;
  opacity: 1; 
}

DEMO: How It Looks