Como animar um elemento quando usar o scroll da página (HTML + CSS + Javascript)

แชร์
ฝัง
  • เผยแพร่เมื่อ 11 ม.ค. 2025

ความคิดเห็น • 41

  • @walkerbarueri
    @walkerbarueri ปีที่แล้ว +1

    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.

    • @serliv
      @serliv  ปีที่แล้ว +1

      Imagina. TMJ 😃

  • @ThronusGuild
    @ThronusGuild ปีที่แล้ว

    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

    • @serliv
      @serliv  ปีที่แล้ว +1

      Muito obrigado David. Pela mensagem e pela inscrição. Abração

    • @ThronusGuild
      @ThronusGuild ปีที่แล้ว

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

  • @malicinhanoob
    @malicinhanoob 2 ปีที่แล้ว

    Muito sua explicação e os conteúdos. não canso de assistir aos seus cursos

    • @serliv
      @serliv  2 ปีที่แล้ว

      Show. Muito obrigado pelo apoio. Forte abraço

  • @marcoskommling4819
    @marcoskommling4819 2 ปีที่แล้ว +1

    Teu conteúdo sempre é excelente, continua fazendo vídeos! Você ajuda nós demais!!

    • @serliv
      @serliv  2 ปีที่แล้ว

      Podexá Marcos. Obrigado pela mensagem. Abração

  • @sorayama7488
    @sorayama7488 3 ปีที่แล้ว

    Muito bom, merecia bem mais visualizações. Seu curso é show! Está me ajudando bastante.

    • @serliv
      @serliv  3 ปีที่แล้ว

      Muito obrigado Giovanni. Que bom que gostou

  • @timmy4148
    @timmy4148 ปีที่แล้ว

    ajudou muito com esse video, obrigado!

    • @serliv
      @serliv  ปีที่แล้ว

      Fico feliz Timmy. Muito obrigado pela mensagem

  • @CooldyValorant
    @CooldyValorant 2 ปีที่แล้ว

    O único que encontrei ensinando isso! Obrigado!

    • @serliv
      @serliv  2 ปีที่แล้ว +1

      Opa. Eu que agradeço. Forte abraço

  • @MrGinWR
    @MrGinWR 2 ปีที่แล้ว

    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.

    • @serliv
      @serliv  2 ปีที่แล้ว

      Aeeee. Muito obrigado pelo feedback, like e inscrição. Forte abraço

  • @HistoriasdeTerrorBlackHouseTV
    @HistoriasdeTerrorBlackHouseTV 3 ปีที่แล้ว +1

    muito bom professor ^^

    • @serliv
      @serliv  3 ปีที่แล้ว

      Muito obrigado

  • @brbruxo666
    @brbruxo666 2 ปีที่แล้ว

    Muito bom seu conteúdo era o que precisava

    • @serliv
      @serliv  2 ปีที่แล้ว

      Muito obrigado pelo feedback Walisson

  • @Tue-so2ls
    @Tue-so2ls ปีที่แล้ว

    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?

  • @Tue-so2ls
    @Tue-so2ls ปีที่แล้ว +2

    Pra que serve o array.from? E quando devo usar?

    • @fms1
      @fms1 ปีที่แล้ว +1

      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

    • @Tue-so2ls
      @Tue-so2ls ปีที่แล้ว +1

      @@fms1 então basicamente ele transforma uma "lista de elementos" em um array?

    • @fms1
      @fms1 ปีที่แล้ว

      @@Tue-so2ls basicamente, sim, pois pelo jeito o observer não suporta queryselectorAll, então usou o array para listar todos

    • @serliv
      @serliv  ปีที่แล้ว +1

      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

  • @higorlokk
    @higorlokk 2 ปีที่แล้ว

    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

  • @danilosantos9252
    @danilosantos9252 3 ปีที่แล้ว +1

    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.

    • @serliv
      @serliv  3 ปีที่แล้ว

      Sim Danilo. Deve ter comprado pela udemy, certo? Manda por lá que dou uma olhada sim. Abraços

    • @andresombra2945
      @andresombra2945 2 ปีที่แล้ว

      Qual link do seu curso, vou comprar só por causa da atenção aos alunos , deve ser ótimo suas aulas

  • @bobsauron
    @bobsauron 3 ปีที่แล้ว

    Sensacional

    • @serliv
      @serliv  3 ปีที่แล้ว

      Muito obrigado Robert. Valeu mesmo

  • @programandocomcafeecerveja3013
    @programandocomcafeecerveja3013 ปีที่แล้ว

    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?

  • @henrique19941000
    @henrique19941000 2 ปีที่แล้ว

    obrigado hehe

    • @serliv
      @serliv  2 ปีที่แล้ว

      Eu que agradeço Henrique

  • @nomadealex
    @nomadealex ปีที่แล้ว

    O console fica disparando o entries.. Isso é normal?

    • @serliv
      @serliv  ปีที่แล้ว

      quando faz scroll, sim

  • @natanmiguel2977
    @natanmiguel2977 2 ปีที่แล้ว

    deu Aula

    • @serliv
      @serliv  2 ปีที่แล้ว

      Obrigado Natan. Que bom que gostou

  • @damieenlucas
    @damieenlucas ปีที่แล้ว

    muito ruum, vc deveria refazer do zero, iniciantes nao conseguem acompanhar