Animar ao Scroll com JavaScript Puro

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:
github.com/ori...
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:
www.origamid.c...
Mais sobre JavaScript e jQuery no curso:
www.origamid.c...

[@agouzoulhoucine5412]

Apenas uma dica rapidinho, pageYOffset virou scrollY, e pageXOffset virou scrollX no ES6...

[@sarahalves2946]

const debounce = function(func, wait, immediate) { let timeout; return function(...args) { const context = this; const later = function() { timeout = null; if(!immediate) func.apply(context, args) }; const callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if(callNow) func.apply(context, args); }; };

[@renantibia92]

Como pode um vídeo de 4 anos atrás ainda estar tão atual em 2022... Origamid é diferenciado demais!

[@andreiagdo939]

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

[@LuizHenrique-em8yp]

Boa! boa dica!

[@Guilherme-mg7io]

arrasou

[@DhenysonJhean]

Quase 3 anos e o vídeo ainda me ajudando, top. Muito obrigado!!!

[@felipediogo351]

4 anos kkk

[@iLUIZtrador]

Comprei os cursos e na boa...valeu cada centavo.

[@kanijo181920]

Verdade eu comprei hoje acesso vitalicio

[@SamuelFJRDev]

5 anos depois e essa aula ainda continua pra uso hahahaha qualidade origamid

[@vicyoslinuxofficial2607]

Mano, na moral, tú deveria ganhar uma fucking Oscar de melhor professor de programação brasileiro já visto até hoje na face da terra! Kkkkkkkkkkkk

[@nderXP]

Eu dei uma customizada no seu codigo, removi o " + ((window.innerHeight * 3) /4)" e la nos milissegundos dei uma diminuída pra 100. Vai ter o mesmo efeito que o window.innerHeight*0.75, soque que vai ser compátivel pra todo tamanho de monitor, pois quando ele aparecer no primeiro pixel da parte inferior do monitor, ele vai ter um delay de algums milissegundos pra fazer a animação. Ao menos isso funcionou melhor pra mim, pois items que estavam próximos do topo já apareciam sem nem dar tempo de scrollar a tela pra baixo.

[@ricardosilvaalves6168]

05/08/2022 e esse video me ajudou muito!

[@MateusOliveira-hf3fd]

Tu é pika professor, vou ate voltar a assinar a plataforma depois dessa.

[@Megatorial]

Cara seu jeito de explicar é pft muito didático

[@luanacristinar.goncalves4085]

Onde curte 1000x. Gratidão. Deus abençoe você

[@mikkomiranda8526]

Man even doe i don't understand your language i learned so much , AWEsome VIDEO

[@michelventura3882]

excelentes aulas esse cara ensina muito bem, obrigado professor !

[@joseniltonleiteduarte7843]

Eu sou programador JavaScript i iciante e gostei pra carambra desse conteúdo!

[@Guilherme-mg7io]

Senhor Origamid, você é o cara

[@diegomoralesnavarro8034]

Muito legal. Grava mais videos sobre JavaScript Puro.

[@paulobrasil4339]

Rápido, prático e preciso, excelente vídeo! ✌

[@victorfigueiredo6031]

Caraca mano, que qualidade de aula! Já tem meu like e inscrição

[@mariohenrique8441]

Você explica muito bem o conteúdo. Parabéns.

[@marianaguirado8643]

ganhou +1 inscrita, didática impecável parabéns!!!

[@VanCledson-j7j]

TU é muito brabo mano

[@lucasinacio3162]

tu explica muito bem vey, slc. Adquiri o vitalício, porém não iniciei ainda.

[@renatoazevedo100]

Excelente !!! Simples e objetivo !!!! Obrigado !!!

[@lucascardoso2557]

Mas sua aula sem dúvidas, é muito foda! Me fez pensar em pagar pelos cursos ;)

[@nwic]

acabou o javascript puro quando usou a lib, mas gostei muito do video, parabéns.like

[@Origamid]

Uma função de debounce não é uma lib não.

[@renatoazevedo9331]

Excelente !!! Obrigado ... me ajudou muito !

[@isaacalencar3841]

Vídeo massa pra caramba! Muito objetivo

[@vamosimaginar]

Parabéns pela explicação.

[@fabiofabinho3366]

muito bom! simples objetivo e ótimo conteudo

[@jorgedelima5329]

Boa tarde , ótimo vídeo , parabéns.

[@paulohenriquekolb8349]

massa irmão, me ajudou bastante aqui! Obrigado pelo video!

[@deowenz4410]

Ótima aula!!

[@josenilson_neiva]

cara, show de bola. Muito bom.

[@cristiangalvao8328]

Cara muito bom gostei de verdade que você melhore cada dia mais. Ganhou um inscrito. Eu só não entendei muito a parte do if, a parte em que você compara o top com a distancia exata do elemento e faz a condição se for maior. Por favor tem que explica detalhadamente?

[@luanrodrigues5855]

Conteúdo foda! Parabéns cara!

[@razzorman]

Sensacional!

[@Victorbio1]

Espero que esteja podre de rico irmão!! Tudo de bom pra vc!

[@EduardoPavanidesign]

Muito boa explicação!

[@IreneuGamer]

Muito obrigado me ajudo muito, so tive q mudar algumas coisa no react

[@phvaguiar]

Parabéns pelo trabalho

[@madruguinhadocs]

Conteúdo de qualidade!

[@joaocarlosdosanjosbrito3351]

Poxa man, vc me salvouuu.

[@LottusAlfaiatariacosturas]

nao consegui achar a funçao que o rapaz usou entao fiz a minha vou deixar o codigo para ajudar o proximo: function anime() { const windowTop = window.scrollY + ((window.innerHeight * 3) / 4); target.forEach(function(element) { if((windowTop) > element.offsetTop) { element.classList.add('animar') } else { element.classList.remove('animar') } }) } if(target.length) { window.addEventListener('scroll', debounce(function(){ // console.log('conte') anime() console.log('dsad') }, 200)); } function debounce(fn, delay) { let timer = null return function() { clearTimeout(timer) timer = setTimeout(function() { fn() }, delay) } }

[@keilakdb]

Oi, eu estou testando o curso pois irei compra-lo, perguntinha, no curso comprado você fala rápido assim tambem?? vc fala muito rapido, mas estou gostando das aulas experimentais aqui, to ansiosa para comprar o curso, só não consegui ainda ....

[@tiagoluiz3129]

muito obrigado... muito bom...valeu mesmo...👍👍✌

[@digitalhdr7768]

muito top, value

[@carlosyurimedeirosfigueire5624]

Cara, tu é foda. kkk

[@baixoorcamento6887]

Teve alguma atualização, o meu não está funcionando e está igualzinho, eu acho. Ele atualiza tudo e faz a animação sem dar o scroll

[@jmarlopes.2533]

ao inves do debounde eu não poderia colocar um setTimeOut para atrasar um pouco?

[@joaopedroribeirolima1285]

Cara, que animal!

[@weslleymatheus3643]

cara, o que vc fez qnd eu rolo o scroll, ele chama a função, teria como eu fazer isso sendo q mais especifico? por exemplo se eu rolar para baixo eu chamo tal evento e ara cima chamo outro, qual comando eu usaria??

[@ClaudineyPerbony]

Top!! Parabéns

[@pedrodossantosmacieljr8979]

esta dando erro dizendo que forEach não é uma função sem falar que o pageYoffset esta depreciado, que pena esse efito é muito dahora!

[@rafaelandrade6989]

fantásticooo!!!! vlw d+ !!!!!

[@josealysson2166]

esse script não tá funcionando no meu media query mobile alguem pode me ajudar?

[@renatamelomendonca]

17:55, a debounce não resulta no mesmo resultado da setTimeOut()?

[@madruguinhadocs]

Pela lógica o settimeout irá executar todos os eventos depois de algum tempo. Ele só atrasa o efeito colateral, e não é o que queremos. Queremos dar uma "segurada" no evento, para que ele não endoide para cara scroll. Pela lógica seria isso, mas vou ter que testar pra tirar essa pulga que vc me colocou.

[@elvesgomesnevessantos4757]

Eu pensei a mesma coisa, teoricamente sim, até pq o setTimeOut ele executa em outra thread e faz a execução em paralelo.

[@EmCacoal]

Boa tarde! Excelente aula! Qual tema está usando no VS Code?

[@Origamid]

Origamid

[@romariooliveira207]

olá, estou fazendo esse processo com uma div, o problema é que ela ocupa já a tela toda e quando programo para ela começar vindo da direita/esquerda ela estoura a tela e aparece o scrol horizontal quando elas não estão amostra?

[@viniciusvirtuoso7459]

Tavez se você colocar no css dessa div um "overflow: hidden" resolva...

[@jacksonbr4759]

Você é simplesmente incrível, você possui cursos na Ademy?

[@m.goulart1390]

como eu faço para quando o scroll voltar pra cima, ele resetar as animações e não precisar ficar dando refresh pra elas funcioanrem? @Origamid

[@joabe474]

Bom dia, estou com um erro,minha class ativa assim que eu rolo o scroll, não quando chegar no data.

[@WelldiPaula]

Ótima dica

[@hugocsl]

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?

[@Origamid]

Como é uma animação simples, o browser já é otimizado o suficiente para isso. O will-change deve ser usado com moderação, quando você identifica problemas de performance em uma mudança. Além disso eu precisaria de outros cálculos para adicionar o will change um pouco antes de animar e remover depois, pois deixar ela pura ali para sempre, não é uma boa ideia.

[@Origamid]

Mas dito isso, vale testar se melhora algo.

[@leonardoguastellacanedo4714]

Estou com um pequeno problema de que as animações não voltam mesmo não estragando visíveis na tela, tentei debugar com console log e parece que o else não funciona... alguem tem alguma ideia do que pode ser?

[@vandersonandrades]

show!

[@angelo.piletti]

Valeu cara! Manda o link do teu curso no hotmart haahahaha

[@renancoelho5657]

Excelente!

[@michel.lazzarin]

Alguém sabe que tema é esse?

[@gesserpaixao1]

Olá, boa explicação. mas meu não Funcionou. Alguem pode me ajudar?

[@A7Matheus]

Fala ae irmão. Coloquei esse código no meu site pra animar a subida das Sections conforme do Scroll, mas tive um problema que não consigo resolver. Ao rolar a página, as sections tampam a NavBar q estava com Position Fixed. Como posso resolver para que a minha navbar fique sempre fixa por cima de tudo?

[@vitoriouskkk]

z-index

[@leoquiterio]

Sensacional! Meu querido, é possível nesse SCRIPT ajustar um tempo? Por exemplo, após 1s ele executa o outro item?

[@marcosandrade7908]

Você pode fazer isso com um setTimeout. A partir da execução da animação em um dos elementos, começa a contar os segundos.

[@wandersonlima4912]

Rafael, você pensa em criar novos cursos?

[@wagnerwagner8883]

Funciona com Bootstrap 4 ? No meu não funcionou...

[@natanaelluiz5425]

Amigo em relação a velocidade está sendo muito rápido... mal consigo ver quando aparece... Como faço para poder deixar mais lento ou mais rápido.... ??

[@Origamid]

A velocidade da animação é de acordo com o transition, no caso está .3s tem que mudar ele para ficar mais lento.

[@ronaldmarques1794]

Muito bom

[@guui3423]

Será que eu, que serei um programador, devo saber fazer isso do zero ou posso simplesmente copiar o código e apenas saber como ele funciona?

[@gabriellcruz7467]

Vai depender de aplicação para aplicação, no caso seria bom vc aprender a lógica que ele usou para fazer as animações e não simplesmente decorar o código

[@douglasvallinhos1102]

target.forEach is not a function no meu só aparece esse erro no console, já fiz diversas vezes, o que pode ser?

[@leonardosilva3839]

Ele está reconhecendo somente 1 elemento quando ele faz a leitura, tem que possuir mais de 1 elemento...

[@bryanmartins3637]

Cara, qual fonte vc usa no seu IDE?

[@michelventura3882]

cara aqui deu um problema que não consigo resolver nem a pau, seguinte fiz igual porem a animação funciona em qual quer elemento que eu queira da pagina menos numa div que eu quero que funcione ... tipo o efeito funciona no pai dessa div porem na div filho não, alguém sabe me dizer porque isso? ah e detalhe, quando dou f5 ele faz o efeito na div que eu quero porem não faz quando scrolla e chega na parte da div ... só que pra qual quer outro elemento funciona perfeitamente só nessa div não

[@michelventura3882]

achei o bug, a div tava com position relative, dai não pega a animação ...

[@filippobarcellos2944]

muito bom. qual theme ta usando pro vscode?

[@Origamid]

Origamid hehehe, estou desenvolvendo ainda. Depois vou publicar, objetivo é manter consistência com ele, exemplo o que é função é amarelo sempre, variáveis em branco, objetos nativos e palavras especiais (como function, const e outras) roxo e por ai vai. Até existem alguns temas consistentes, mas tem muito ai, que tu cria a função ela é verde, depois quando usa ela está azul.

[@josimarvieira4837]

como faz para o evento apenas executar uma vez? sem precisar ficar sendo executado toda vez que damos o sroll???

[@thyagofranca9299]

Também gostaria de saber

[@viniciusvirtuoso7459]

So retirar o else ou colocar nele "element.classList.add (nome da sua animação); ao invés "element.classList.remove (nome da sua animação);

[@wandersonlima4912]

kd os vídeos??? o site ta com um visual "Foda" parabéns.

[@o-autentico]

mano conheci seu canal hoje, se ver essa mensagem por favor me de um retorno, == estou com problema no forEach ele esta me retornando um erro, quando rolo a pagina, o que poderia ser

[@zackwn2069]

coloca o código aqui

[@BloggerProfissional]

EU TAMBÉM ESTAVA... pra resolver é só colocar o código por último na página, resolveu no meu site.

[@XibaaH]

Sensacional.. funcionou de boa na versão desktop, sendo que na versão mobile não funciona na parte do footer! alguém ajuda ?

[@josealysson2166]

também to com esse problema no desktop funciona normal mas no mobile a animação é ignorada não sei o porq

[@catharineaugusto7057]

Qual o nome desse tema do vscode?

[@Origamid]

Origamid

[@digao3429]

no meu tá dando: Uncaught SyntaxError: Identifier 'debounce' has already been declared

[@MukyOficial]

vc baixou a biblioteca Lodash ?

[@digao3429]

@@MukyOficial não baixei, talvez seja isso :/

[@lucascella8687]

Estou com o código exatamente igual, e não funciona! Alguém sabe o por quê?

[@thebeavercortes]

eu tbm

[@nwic]

se n funciona pode ser o seu browser que não reconhece o ES6 baixe e pesquise pelo babel

[@doisbits145]

qual é esse navegador

[@leoquiterio]

Boa tarde, Você saberia me dizer como é possível realizar um efeito de "scroll" semelhante a este site: work.antonandirene.com/karimrashid/

[@randomicallyrandom]

caraalho, que site louco!

[@MauricioPedrodaRocha]

genial dmais

[@baixoorcamento6887]

E ai descobriu?

[@samuxui]

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: 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.

[@Origamid]

Opa Samuel, não necessariamente a div está se curvando. Isso pode ser um simples background com svg

[@samuxui]

Faz um tuto pro seu chato aqui faz kkkk Nem vc falando que é svg eu saberia manipular a onda. abraço!

[@luisribeiro8741]

cara vc é um loirinho que aparece nos anuncios do yt? kkk

[@lucascardoso2557]

Minha nossa! Você chama de simples 200 linhas pra fazer um slide com transição de opacidade KKKKKKKKKKK. Nem quero saber o que seria complicado!

[@thiagolopes4163]

estou com um problema quando esta em mobile fica uma barra de rolagem por causa que a div está deslocada como resolvo isso?

[@fabiojose709]

html, body { overflow-x: hidden; } body { position: relative; }

[@thiagolopes4163]

@@fabiojose709 Obrigado!!!!!! deu certo me salvo kkkk...

[@adilson1717]

qual o nome deste tema do vscode?

[@Origamid]

É próprio meu Adilson, quando terminar de desenvolver ele eu vou publicar.

[@AntonioCarlos-fv9hx]

@@Origamid Fico no aguardo dessa promessa hein rs

[@Origamid]

Antonio Carlos já foi publicado a bastante tempo hehehe, só buscar Origamid na aba de plugins do VS Code