Biblioteca AOS (Animate On Scroll): personalizar animações ficou simples

Você não precisa de um framework pesado para criar um site bonito e interativo. Com HTML limpo, CSS moderno
e um ajudante leve como o AOS (Animate On Scroll), você publica páginas rápidas e envolventes
com sensação premium sem inchar o código. Pense quantos sites você visita por dia que parecem estáticos,
chapados—e, convenhamos, meio entediantes. Agora imagine sua home: um leve fade, uma rotação suave
ou um slide-in discreto já fazem seu design se destacar. O visitante sente o site vivo e responsivo—isso
é o detalhe que faz parar o scroll.

Um toque de animação acionada no scroll muda completamente a percepção. De repente, seu layout parece
intencional e moderno; sua marca, mais polida; e o conteúdo ganha ritmo e fluidez em vez de só empilhar blocos.
O melhor? O AOS é leve, muito fácil de instalar e não exige dominar um grande framework JS. É uma daquelas
ferramentas em que dez minutos fazem seu site parecer semanas de motion design sob medida.

Se seu site ainda parece “travado” frente à concorrência, aqui está o ganho fácil. Adicione o AOS, experimente
alguns efeitos e veja seu portfólio, blog ou loja ganhar um ar premium rapidamente. Desafie-se: entregue mais
que informação—entregue uma experiência memorável.

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