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
