Animações com Animate on Scroll

Uma animação simples pode fazer a diferença na apresentação do seu site, você sabia?

Neste artigo você irá aprender a como fazer animações de entrada com a biblioteca de JavaScript e CSS Animate on Scroll

  1. 1. Linkando as bibliotecas 🔗

    Começamos linkando o arquivo CSS do AOS que possui as animações em classes CSS no head do nosso documento HTML.

    <head>

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

    </head>

    Feito isto, linkamos o arquivo JavaScript do AOS que ativará as animações para a gente no fim do body do nosso documento.

    <head>

    ...

    </head>

    <body>

    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>

    </body>

  2. 2. Criando a primeira animação 🎆

    Com o AOS devidamente linkado, basta nós o iniciarmos em nosso arquivo JavaScript e passar a usar os atributos que a biblioteca adiciona como funcionalidade ao nosso documento.

    Neste exemplo, o nosso arquivo principal JavaScript será o script.js, onde vamos querer colocar todo o comportamento do nosso site. Ele deve ser linkado após o link do AOS:

    <body>

    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>

    <script src="script.js"></script>

    </body>

    Para iniciar o AOS só precisamos adicionar a seguinte linha no nosso script.js:

    AOS.init();

    Agora já podemos fazer animações no nosso site com o Animate on Scroll!

    É importante para que nossa animação funcione corretamente, sem apresentar barras de rolagem ao ativar, que o seu elemento pai possua o estilo overflow: hidden;, que pode ser dado através do seu arquivo CSS.

    Agora podemos usar o atributo data-aos="" que o AOS nos permite usar em nosso documento HTML para fazermos as animações em qualquer elemento HTML:

    <div style="overflow: hidden;">

    <img data-aos="fade-up" src="gatinho.jpg">

    </div>

    Resultado:

    gato em fundo azul 🎉

  3. 3. Customizando a animação (bônus) 🎨

    Só com o que já temos é totalmente possível utilizar em nossos projetos animações que irão ativar ao usuário rolar a página. Porém vamos dizer que queremos além disto 🤔

    O data-aos que agora podemos usar é muito poderoso, e nos possibilita fazer muitas customizações em nossas animações:

    • Você quer que a animação tenha delay para iniciar? Com data-aos-delay="[millisegundos]" você pode;
    • E fazer a animação acontecer só uma vez? Com data-aos-once="[true||false]" você consegue;
    • Talvez você queira aumentar a duração da animação. Com data-aos-duration="[millisegundos]" você é capaz;
    • Ou até mesmo ir além e fazer escolher onde a animação será ativada. Com data-aos-anchor-placement="[alturaDoElemento]-[alturaDaViewport]{ex.:[top-center]}" é possível.

    Claro, nos comandos acima remova os colchetes e deixe o valor explícito, como no primeiro exemplo da etapa dois.

    Você pode fazer isto tudo e muito além através da documentação do AOS.

    4. gatinho 2 gatinho 3
    gatinho 4
    gatinho 5

    Para mais exemplos e ideias de animações, acesse o Github Pages do AOS.