AOS

Teste com o AOS

by ussuy

HTML

<head>
  <link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
  <script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
</head>

<body>

  <main>
     <div class="fade azul" id="azul" data-aos="fade-up"></div>
     <div class="fade azul" data-aos="fade-down"></div>
     <div class="fade vermelho" data-aos="fade-left"></div>
     <div class="fade vermelho" data-aos="fade-right"></div>
  </main>
  
<!--  data-aos-offset = atraso na animação -->
<!--  data-aos-duration = duração da animação -->
<!--  data-aos-easing = atraso na animação -->
<!--  data-aos-anchor = ancora de trigger em outro elemento -->
<!--  data-aos-anchor-placement = onde na ancora (top, bot) o trigger sera ativado-->
<!--  data-aos-once = true or false - funcao sera chamada apenas uma vez ou sempre -->

</body>

CSS

main {
  display: flex;
  flex-wrap: wrap;
}

.fade {
  margin: 10%;
  width: 30%;
  height: 200px;
  
}

.azul {
  background-color: blue;
}

.vermelho {
  background-color: red;
}

JavaScript

AOS.init();