Compartiilhe

Se você está procurando como animar elementos ao fazer scroll com o mouse de forma fácil, veja esse artigo, animação com scroll mais fácil que já vi.

Pesquisando sobre como animar alguns elementos com o scroll do mouse, me deparei com diversas soluções, mas confesso que nenhuma chegou aos pés da facilidade dessa implementação, melhor biblioteca que já vi, se tiver alguma outra melhor, pode me falar ai nos comentários.

Você pode ver a aplicação funcionando já com os exemplos clicando aqui AOS – Animate On Scroll Library e no GitHub aqui

Vamos para parte prática, instalar no html simples a biblioteca para animar elementos com scroll.

Instalação básica, no seu <head> coloque o código abaixo:

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

E antes de fechar o </body> você coloca essa chamada do script.

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

Dentro do <script>AOS.init();</script> você pode chamar as configurações que achar interessante, no meu caso, eu acabei importando tudo para também poder testar.

/ You can also pass an optional settings object
// below listed default settings
AOS.init({
  // Global settings:
  disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
  startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
  initClassName: 'aos-init', // class applied after initialization
  animatedClassName: 'aos-animate', // class applied on animation
  useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
  disableMutationObserver: false, // disables automatic mutations' detections (advanced)
  debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
  throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
  

  // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
  offset: 120, // offset (in px) from the original trigger point
  delay: 0, // values from 0 to 3000, with step 50ms
  duration: 400, // values from 0 to 3000, with step 50ms
  easing: 'ease', // default easing for AOS animations
  once: false, // whether animation should happen only once - while scrolling down
  mirror: false, // whether elements should animate out while scrolling past them
  anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation

});

E o seu uso é muito simples, vamos por exemplo, imaginar o seguinte cenário:

<div data-aos="zoom-in" data-aos-duration="2000">
    <div class="divBoxTexto1">
        <div class="texto1">
            <p>Texto1</p>
        </div>
    </div>
    <div class="divBoxTexto2">
        <div class="texto2">
            <p>texto</p>
        </div>
    </div>
</div>

No caso do exemplo acima, terá um efeito de zoom-in no momento do scroll do mouse nessa região do seu site.

Ou seja, em resumo, basta você envolver o código no local onde você quer.

Veja essa lista abaixo, quanta opção de animação:

Animations

  • Fade animations:
    • fade
    • fade-up
    • fade-down
    • fade-left
    • fade-right
    • fade-up-right
    • fade-up-left
    • fade-down-right
    • fade-down-left
  • Flip animations:
    • flip-up
    • flip-down
    • flip-left
    • flip-right
  • Slide animations:
    • slide-up
    • slide-down
    • slide-left
    • slide-right
  • Zoom animations:
    • zoom-in
    • zoom-in-up
    • zoom-in-down
    • zoom-in-left
    • zoom-in-right
    • zoom-out
    • zoom-out-up
    • zoom-out-down
    • zoom-out-left
    • zoom-out-right

Anchor placements:

  • top-bottom
  • top-center
  • top-top
  • center-bottom
  • center-center
  • center-top
  • bottom-bottom
  • bottom-center
  • bottom-top

Easing functions:

  • linear
  • ease
  • ease-in
  • ease-out
  • ease-in-out
  • ease-in-back
  • ease-out-back
  • ease-in-out-back
  • ease-in-sine
  • ease-out-sine
  • ease-in-out-sine
  • ease-in-quad
  • ease-out-quad
  • ease-in-out-quad
  • ease-in-cubic
  • ease-out-cubic
  • ease-in-out-cubic
  • ease-in-quart
  • ease-out-quart
  • ease-in-out-quart

Para ver mais exemplos e acesso ao github, acesse o endereço aqui github.com/michalsnik/aos


Compartiilhe