Como animar um elemento quando usar o scroll da página (HTML + CSS + Javascript)
HTML-код
- Опубликовано: 1 окт 2024
- A forma mais rápida para animar um elemento quando estiver visível na tela (sem listener no scroll)
Nesse vídeo mostro como usar uma API do HTML5 chamada Intersection Observer para monitorar quando determinados elementos do DOM passam a ficar visíveis na tela.
O interessante dessa API é que não precisamos trabalhar com listeners de scroll, o que pode gerar certo gargalo na performance da página ou aplicação.
Outros links que podem ser interessantes:
Blog: serfrontend.co...
Meus cursos: serfrontend.co...
Canais em redes sociais:
Twitter: / serfrontend
Linkedin: / serfrontend
Instagram: / serfrontendcursos
Facebook: / serfrontend
Instrutor: Daniel Tapias Morales
Twitter: / tapmorales
Linkedin: / daniel-tapias-morales-...
Medium: / tapmorales
Github: github.com/tap...
📺 Playlists: / serfrontend
![NOSFERATU - Official Trailer [HD] - Only In Theaters December 25](http://i.ytimg.com/vi/nulvWqYUM8k/mqdefault.jpg)
muito ruum, vc deveria refazer do zero, iniciantes nao conseguem acompanhar
Nossa que facilidade. Eu fiz o seu curso na Udemy de Web Design completo Prof. E olha, eu sofria pra fazer algo simples assim só que na mão, com JS puro. Essa API vai salvar muito. Obrigado prof.
Imagina. TMJ 😃
O console fica disparando o entries.. Isso é normal?
quando faz scroll, sim
Não sei se entendi, quando carrega a página o array recebi todos os items e verifica se ele estão sendo intersectados, e quando vc escrolla o array recebi apenas 1 item que é o elemento que está sendo intersectado estou certo?
Não estou conseguindo replicar no meu projeto.. Acredito que seja devido ao scripts.js pois já tinha alguns codigos de nesse arquivo tentei adicionar essa linha mas não foi.. se puder ajudar eu agradeço
Só para entender. Os elementos começam com opacidade 0 e terminam com 1, ou estão apenas ocultos na pagina e depois do scroll eles voltam a ficar visiveis?
Parabéns amigo, seu vídeo me ajudou a adicionar um evento de reveal ao scroll no react sem bibliotecas... Ganhou +1 like e +1 inscrito, parabéns.
Aeeee. Muito obrigado pelo feedback, like e inscrição. Forte abraço
Olá professor, estou fazendo o seu curso de web designer, peguei meu primeiro freela porem estou tendo problemas com um script que fiz, para scrolar suavemente, o freela é um onepage porém ja fiz de tudo e não consigo entender porque não funcionar. haveria alguma possibilidade de voce dar uma olhada no meu script para ver o que estou errando? caso não tenha a possibilidade, sem problemas. desde já agradeço pelos conhecimentos passado.
Sim Danilo. Deve ter comprado pela udemy, certo? Manda por lá que dou uma olhada sim. Abraços
Qual link do seu curso, vou comprar só por causa da atenção aos alunos , deve ser ótimo suas aulas
Teu conteúdo sempre é excelente, continua fazendo vídeos! Você ajuda nós demais!!
Podexá Marcos. Obrigado pela mensagem. Abração
Pra que serve o array.from? E quando devo usar?
Ele serve para quando vc precisa gerar um array já com uma determinada quantidade (seja vazia ou com algum valor padrão), nesse caso ele está gerando um array contendo os elementos do observer, como ele utilizou o foreach, retornou um array de 8 posições pré prenchidas com os elementos. Boa abordagem, melhor do usar for ou foreach e preencher push um array vazio
@@fms1 então basicamente ele transforma uma "lista de elementos" em um array?
@@Tue-so2ls basicamente, sim, pois pelo jeito o observer não suporta queryselectorAll, então usou o array para listar todos
O arrar.from serve para criar um array de verdade a partir de um objeto array like, ou seja, que se parece um array mas não possui todas as propriedades e métodos
muito bom professor ^^
Muito obrigado
Parabéns demais! eu até briguei com o GPT aqui pq não estava conseguindo fazer hahahaha
procurei em alguns lugares, mas seu vídeo foi o lugar mais acertivo para o que eu buscava! Ganhou mais um inscrito
Muito obrigado David. Pela mensagem e pela inscrição. Abração
@@serliv para o caso de querer fazer 2 elementos dentro de uma div entrarem em posições diferentes, um aparecer normalmente(texto por exemplo) e as imagens entrarem na diagonal (esquerda-direita)? seria interessante fazer um vídeo também sobre isso.
Muito bom, merecia bem mais visualizações. Seu curso é show! Está me ajudando bastante.
Muito obrigado Giovanni. Que bom que gostou
ajudou muito com esse video, obrigado!
Fico feliz Timmy. Muito obrigado pela mensagem
Muito sua explicação e os conteúdos. não canso de assistir aos seus cursos
Show. Muito obrigado pelo apoio. Forte abraço
O único que encontrei ensinando isso! Obrigado!
Opa. Eu que agradeço. Forte abraço
Muito bom seu conteúdo era o que precisava
Muito obrigado pelo feedback Walisson
obrigado hehe
Eu que agradeço Henrique
Sensacional
Muito obrigado Robert. Valeu mesmo
deu Aula
Obrigado Natan. Que bom que gostou