O objetivo dessa aula é criar animações de entrada de conteúdo, que são ativadas durante o scroll do usuário.
O efeito da animação é feito puramente com CSS, porém a ativação da mesma é feita com JavaScript
Arquivos da aula:
https://www.dropbox.com/sh/6gihyt25axvzrj3/AADXIMsTbg_WxokW6apP9HUAa?dl=0
Lógica da animação:
1 – Selecionar elementos que devem ser animados
2 – Definir a classe que é adicionada durante a animação
3 – Criar função de animação
3.1 – Verificar a distância entre a barra de scroll e o topo do site
3.2 – Verificar se a distância do 3.1 + Offset é maior do que a distância entre o elemento e o Topo da Página.
3.3 – Se verdadeiro adicionar classe de animação, remover se for falso.
4 – Ativar a função de animação toda vez que o usuário utilizar o Scroll
5 – Otimizar ativação
Site animado criado no curso de CSS Grid Layout:
https://www.origamid.com/cursos/css-grid-layout/
Mais sobre JavaScript e jQuery no curso:
https://www.origamid.com/cursos/javascript-e-jquery/
Original source
12 responses to “Animar ao Scroll com JavaScript Puro”
Parabéns pelo trabalho
Cara, que animal!
o meu n fez o efeito 🙁
qual o nome deste tema do vscode?
Excelente!
Comprei os cursos e na boa…valeu cada centavo.
André muito da hora kra…
Tenho um próximo palpite que quebrei a cabeça esses dias:
Como fazer as divs se curvarem(ondas) nesse estilo aqui:
https://www.uplabs.com/posts/landing-page-design-for-mobile-app
Kra fica muito bonito na landing page mas eu pelejei pra achar tutorial e nada.
Muito legal.
Grava mais videos sobre JavaScript Puro.
Top!! Parabéns
muito bom. qual theme ta usando pro vscode?
Muito bom, didática excelente como sempre! Nesse caso de animação acelerada por hardware não seria interessante usar o 'will-change' já que essa classe só vai ser setada no evento scroll?
Sensacional essa vídeo aula, só uma pequena modificação, aos 14:00, você faz 2 contas para pegar 3/4 do valor da tela, poderia simplesmente fazer (window.innerHeight * 0.75) que daria o mesmo valor e com menos processamento e matematicamente mais rápido, mas ainda sim, incrível essa aula