Animar ao Scroll com jQuery

Scroll com jQuery

Animar uma pagina ao Scroll usando jQuery é muito simples, usaremos 3 variáveis e dua function, isso em poucas linhas.

Antes de inciar visite o site do jQuery para baixar os arquivos ou utilize o CDN abaixo.

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

Criando animação CSS simples.

Vamos criar dua class sendo um para animação inicial e outra para quando for realizado o Scroll.

.anime{
opacity: 0;
transition: 0.5s;
transform: translate3d(-200px, 0, 0);
}

.anime-ativa{
opacity: 1;
transition: 0.5s;
transform: translate3d(0px, 0, 0);
}

Aplicando Class no HTML

A class pode ser aplicada direto na imagem ou paragrafo para animar, ou se preferir pode ser criada uma div para colocar tudo dentro a animar todos ao mesmo tempo.

<div class="anime">
<h2>titulo 1</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem ut inventore accusamus autem atque, a temporibus repudiandae illo, iste consequatur praesentium modi odio accusantium perspiciatis. Dolor in, aperiam nobis dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem ut inventore accusamus autem atque, a temporibus repudiandae illo, iste consequatur praesentium modi odio accusantium perspiciatis. Dolor in, aperiam nobis dignissimos.</p>

</div>

Criando o script

Agora vamos criar o script usando jQuery, antes da função temos que definir três variáveis.
Primeira vai pegar todas as class que será animada.
Segunda vai criar uma string para criar outra class
Terceira vai capturar uma altura.

let target = $('.anime')
let classAnimar = 'anime-ativa'
let offset = $(window).height() * 3/4;

Será necessário criar um função para capturar a sua altura atual.

const animeScroll = ()=>{

let minhaPosicao = $(this).scrollTop()

}

Dentro da função animeScroll será criada uma outra função para adicionar ou remover a class que vai animar.

const animeScroll = ()=>{
let minhaPosicao = $(this).scrollTop()

target.each(function(){
let itemTop = $(this).offset().top

minhaPosicao > itemTop - offset
? $(this).addClass(classAnimar) : $(this).removeClass(classAnimar)
})

}

Para ativar a função vamos chamar de duas formas, uma quando a pagina for carregada e outra quando o scroll for ativado.

animeScroll()

window.addEventListener('scroll', animeScroll);

Código completo.

let target = $('.anime')
let classAnimar = 'anime-ativa'
let offset = $(window).height() * 3/4;

const animeScroll = ()=>{
let minhaPosicao = $(this).scrollTop()

target.each(function(){
let itemTop = $(this).offset().top

minhaPosicao > itemTop - offset
? $(this).addClass(classAnimar) : $(this).removeClass(classAnimar)
})

}

animeScroll()

window.addEventListener('scroll', animeScroll);

Abaixo está o link para criar o mesmo script porem usando JS puro.

https://desenvolvedor-web.blogspot.com.br/2018/01/animacao-com-scroll-usando-javascript.html