Animação no Scroll | Usando apenas HTML, CSS e JavaScript

Поділитися
Вставка
  • Опубліковано 11 вер 2024
  • Vou te ajudar com Programação: bit.ly/3TsEZ2O
    Animação no Scroll somente com HTML, CSS e JavaScript. Aprenda a como se tornar um Programador do ZERO e avance nas tecnologias que você precisa pra isso nesse vídeo.
    Curso de HTML: • Curso de HTML do ZERO ...
    Curso de CSS: • Curso de CSS | Aprenda...
    Curso de JavaScript: • Curso de JavaScript pa...
    VsCode: • DOMINE O VSCODE E AUME...
    Inscreva-se no Canal: bit.ly/3h1xtJ5
    ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
    Meus Links 👇👇
    🔥 Todos os meus Links: rodolfomori.co...
    🔴 Live toda Terça: go.rodolfomori...
    📸 Insta: @rodolfomorii / rodolfomorii
    🚀 Receba Dicas de Programação: go.rodolfomori...
    ‎‍👥 Fale com nossa equipe: go.rodolfomori...
    ‎‍🎓 Meu curso de Programação: rodolfomori.co...
    📚 E-book gratuito - Aprenda Programação do ZERO: go.rodolfomori...
    Criei este canal para ajudar você que quer sair do ZERO, iniciar sua jornada e se tornar um programador!
    Se já é um programador e quer evoluir na carreira de programação, também está no lugar certo, aqui você vai encontrar conteúdos relevantes que vão te ajudar!
  • Наука та технологія

КОМЕНТАРІ • 113

  • @canaldevclub
    @canaldevclub  Рік тому +9

    COMENTE aí o que mais vocês querem aqui no Canal!

    • @wevertontsousa
      @wevertontsousa Рік тому

      Que didática boa!
      Eu queria um vídeo assim com a criação de tabelas e bem estilosas e claro responsivas.

    • @patrickguimaraes3879
      @patrickguimaraes3879 Рік тому

      Parabéns professor!!

  • @ramon221b
    @ramon221b Рік тому +20

    esse conteúdo é ouro! felizes aqueles que encontram esse vídeo 👏👏👏👏👏

  • @BrenoRibeiro-p5f
    @BrenoRibeiro-p5f 2 місяці тому +4

    Sensacional, assim como o rapaz do vídeo, achava que era algo de sete cabeças para fazer essa transição kkkkkkk

  • @nerdfundao
    @nerdfundao 6 місяців тому +3

    Vi muitos vídeos de gringos ensinando a fazer a mesma coisa, mas o seu foi o único que explicou cada coisa que tava acontecendo e o que cada linha de código tava fazendo, principalmente na parte do Javascript, conseguiu me tirar muitas dúvidas, vou até me inscrever no canal

    • @canaldevclub
      @canaldevclub  6 місяців тому +2

      Ficamos felizes em saber!!

  • @samuel1783
    @samuel1783 2 місяці тому +2

    Que conteúdo incrível meu querido, simplificou coisas que eu nem imaginava que existiam. Parabéns!!

  • @randolaaleatorio3917
    @randolaaleatorio3917 7 місяців тому +4

    cara, eu iria fazer um id pra cada filho da ultima sessão, mas com essa sacada que você deu do nth-child kkkk pode ser simples pra você, mas pra nós iniciantes foi massa kkkkkkkk valeu cara !

  • @alexmessias9763
    @alexmessias9763 2 місяці тому +2

    Irmão é difícil eu dar like e me inscrever. Mas você mereceu os dois!

    • @canaldevclub
      @canaldevclub  2 місяці тому +1

      Fico feliz em saber mano, tmjj

  • @kewincaue
    @kewincaue Рік тому +1

    Conteúdo incrível, fiquei anos estudando e não conseguia sair do lugar, e após conhecer seu canal, já tenho projetos incríveis publicados, muito obrigado Rodolfo, você é o cara!

  • @LucasSilva-ew7hp
    @LucasSilva-ew7hp 3 місяці тому +1

    Cara dei like no vídeo, ativei o sininho e me inscrevi. Esqueci de algo? rsrs Sinceramente, brincadeiras à parte, que conteúdo sensacional!!! Obrigado cara!
    Não sei se tem conteúdos relacionados a animações com JS e CSS utilizando a função matrix3d, se não tiver gostaria de pedir para um próximo vídeo. Valeu!

  • @pablomachadomarques1009
    @pablomachadomarques1009 3 місяці тому +1

    Uau! Sua didática é simplesmente sensacional. Parabéns.

  • @viniciuspereira6039
    @viniciuspereira6039 Місяць тому +2

    muuito top essa aula mn parabéns 👏👏👏

  • @user-yt3tx2rw8q
    @user-yt3tx2rw8q Рік тому +1

    Muito top, deixei salvo para entender melhor e usar nos próximos projetos, muito bom parabéns Rodolfo, vc é fera cara.

  • @everton1200
    @everton1200 Рік тому +1

    Obrigado, mais um vídeo top, já deixei salvo pra ajudar em futuros projetos kkkk

  • @willl93
    @willl93 Рік тому +1

    Top mano, slc mastigado , de uma forma simples , tinha visto outro vídeo que era a mesma solução porém explicado de uma forma mais complexa rs

  • @lucianaalves3144
    @lucianaalves3144 Рік тому +2

    Amei o vídeo, bem direto e era exatamente o que eu estava procurando, hahaha, muito obrigaaada! 😁

  • @jamdeadend
    @jamdeadend 11 місяців тому

    adorei o video, vc alem de mostrar o codigo ainda explicou o que cada linha faz, além de conseguir fazer sinto que aprendi bastante, muito obg

  • @gabrieladosanjos5462
    @gabrieladosanjos5462 11 місяців тому +1

    video incrivel, impecável, ótima didática perfeito tudo que eu tava procurando

  • @viniciusgiavoni
    @viniciusgiavoni 11 місяців тому

    Parabéns pelo conteúdo, eu adaptei para criar uma barra de progresso que enche quando entra na section, foi de extrema ajuda, valeu.

  • @pamelladefreitas7642
    @pamelladefreitas7642 6 місяців тому

    Eu amei demais essa aula, estava precisando muito disso!
    Incrivel seu canal!

    • @canaldevclub
      @canaldevclub  6 місяців тому

      Que ótimo! Fico feliz em saber

  • @alex84rs
    @alex84rs 5 місяців тому +1

    Novo inscrito 👏🏿👏🏿👏🏿👏🏿, justamente isso que estava procurando, valeu

  • @filipealexandre2353
    @filipealexandre2353 3 місяці тому +1

    Conteúdo massa demais, parabéns e muito obrigado!

  • @thiagosamuels_
    @thiagosamuels_ 9 місяців тому +1

    Muito bom meu mano, parabéns pelo conteúdo!!!

  • @igormonteiro9444
    @igormonteiro9444 8 місяців тому +1

    conteúdo show, muito bem explicado, parabés!

  • @wesleydossantosgonsalves8016

    Amigo, vídeo Sensacional!
    Direto e explicativo. Parabéns pelo conteúdo

  • @everton3285
    @everton3285 Місяць тому +1

    Muitooo top esse vídeo 😊😊

  • @casimirocoche3086
    @casimirocoche3086 Рік тому

    Gostei dos efeitos, muito top como sempre Rodolfo. Gostaria que tivesse aulas no canal de como fazer site com links e informações dentro dos links, seja ela informações com textos, blogs ou paginas de informações

    • @canaldevclub
      @canaldevclub  Рік тому

      E aí man, blz ? Fica fácil, coloca a tag link, e dentro dela você coloca os elementos que você quiser

  • @thisisthetruth9193
    @thisisthetruth9193 11 місяців тому +2

    Que Aula Foda Mano! Valeu

  • @luisgabrieldossantosluizao2552
    @luisgabrieldossantosluizao2552 3 місяці тому +1

    Muito bom explicando 👏👏

  • @gemeostec9249
    @gemeostec9249 Рік тому +2

    salvou muito

  • @leonardoferreira3421
    @leonardoferreira3421 Рік тому

    Conteúdo muito TOP, estava precisando para colocar em meu projeto.

  • @Gabriel-Silva-Dev
    @Gabriel-Silva-Dev 9 місяців тому +1

    vlw manoo me ajudou muito no meu portifolio

    • @canaldevclub
      @canaldevclub  9 місяців тому

      Fico feliz em saber man, tmjj

  • @anthonydaniel1759
    @anthonydaniel1759 11 місяців тому +1

    Conteúdo sensacional !

  • @OFLofiMusic153
    @OFLofiMusic153 Рік тому +1

    cara, de vdd, que video maravilhoso! estou fazendo um trabalho no meu curso, e isso me ajudou demais

  • @Striker-ES
    @Striker-ES 8 місяців тому +1

    obrigado por mais esse aprendizado

  • @johnatanchagas8243
    @johnatanchagas8243 Рік тому +1

    Obrigado pela aula, muito boa mesmo! Diferente de todos os outros canais! Agrega muito nos conhecimentos! Recomendo a todos o DEVCLUB

  • @voceestacertoquiz
    @voceestacertoquiz 10 місяців тому +1

    Quando eu crescer quero ser igual a você na programação..kkkk

    • @canaldevclub
      @canaldevclub  10 місяців тому +1

      Hahaha, valeu man, tmjj 🚀

  • @cesardev404
    @cesardev404 9 місяців тому +1

    Video incrivel, cara

  • @ed1000losAgulha
    @ed1000losAgulha Рік тому +1

    Monstro!!

  • @Diverwith47
    @Diverwith47 9 місяців тому +1

    Nota 10

  • @kaio1091
    @kaio1091 3 місяці тому +1

    Perfeito!

  • @josielmaia8982
    @josielmaia8982 Рік тому +1

    Cara Fantastico
    muito bom mesmo

  • @Agendamento23
    @Agendamento23 2 місяці тому +1

    Brabo

  • @maikonfoltz7708
    @maikonfoltz7708 Рік тому

    Que video toppp parabéns !!

  • @isaiascaetano5888
    @isaiascaetano5888 Рік тому

    Brabo d+ heheh

  • @brunomendoncadev
    @brunomendoncadev Рік тому +1

    Conteúdo sensacional, Me tira uma dúvida por favor. Como faço pra essa animação ser apenas der cima pra baixo e tirar de baixo para cima??

    • @canaldevclub
      @canaldevclub  11 місяців тому

      Só adicionar mais animações nas transições

  • @sagagamerxd
    @sagagamerxd 6 місяців тому +1

    Faz um vídeo desse só quem em React

  • @Luan-qg3sv
    @Luan-qg3sv 11 днів тому +1

    no querySelectiorAll, eu posso colocar mais de uma classe? exemplo: querySelectorAll('.hidden', '.hiddenM')

    • @canaldevclub
      @canaldevclub  6 днів тому

      sim, por exemplo
      var list = document.querySelectorAll("form, p, legend");

  • @rodrigoAffonso1000
    @rodrigoAffonso1000 8 місяців тому +1

    tudo bom gostaria de saber o impacto do SEO no site hoje ? quase 2024, digo isso por causa dos robos que acessam o código e visualizam uma classe hidden em todo o código do site

    • @canaldevclub
      @canaldevclub  8 місяців тому

      Opa, é bom dar uma estudada nisso e entender o básico sim!

  • @josielmaia8982
    @josielmaia8982 Рік тому

    Rodolfo, você é o melhor!!!

  • @souzasouza-xr3ho
    @souzasouza-xr3ho 11 місяців тому

    Muito HTML, CSS e JavaScript

  • @filipealexandre2353
    @filipealexandre2353 3 місяці тому

    Alguém consegue me o porquê deve se usar aquele .target antes do .classList? Por que eu já usei em outros projetos o .classList sem o .target e aí queria entender o por quê nesse caso deve-se usar.

    • @canaldevclub
      @canaldevclub  2 місяці тому +1

      É que é o objeto que ele devolve. Ai dentro do target tem o que eu preciso

  • @DrackOficial
    @DrackOficial Рік тому

    Valeu, ajudou bastante.

  • @josielmaia8982
    @josielmaia8982 Рік тому

    Gostei muito

  • @rafaelmoreira6160
    @rafaelmoreira6160 9 місяців тому

    As animações funcionaram normalmente no mobile/responsivo ?

    • @canaldevclub
      @canaldevclub  9 місяців тому +1

      Para mobile tem que fazer algumas adaptações de responsividade!

  • @Gabrieel_marques_dev
    @Gabrieel_marques_dev 11 місяців тому

    Encontrei um bug quando paro antes da section a prossima nao apareceu

  • @abacaxivermelhodois4203
    @abacaxivermelhodois4203 Рік тому

    Qual a diferença para o Parallax?

    • @canaldevclub
      @canaldevclub  Рік тому

      Esse eu utilizei mais javascript para fazer...E parallax em si é o nome do efeito...eu chamei de animation on scroll rsrs

  • @williammartins4248
    @williammartins4248 Місяць тому +1

    nota 1.0000000000

  • @marcosmalheiros5655
    @marcosmalheiros5655 Рік тому

    Boa noite família

  • @larissaalmeida70
    @larissaalmeida70 8 місяців тому +1

    Ótimo conteúdo

  • @guiotto01
    @guiotto01 10 місяців тому

    o que adianta escrever os codigos e nao explicar?

    • @canaldevclub
      @canaldevclub  10 місяців тому

      Por isso que, na descrição do vídeo tem um nivelamento de tecnologias, para você entender o vídeo, Da uma olhadinha!