Тёмный

Como criar um Menu Transparente com Efeito de Rolagem 

Inteliogia - Dev's Insights
Подписаться 15 тыс.
Просмотров 36 тыс.
50% 1

✅ Conheça o treinamento Modo Front-end e crie projetos incríveis do absoluto zero: bit.ly/3KY8mpn
✅ Quer ter acesso a projetos exclusivos que vão agregar ainda mais na sua carreira? Torne-se membro do Inteliogia:
bit.ly/programmakerspro
Nesse vídeo a gente vai aprender como criar um menu/header transparente e que encolhe quando o usuário rola a página. Esse é um efeito muito útil e estiloso e que ao mesmo tempo é fácil de ser feito.
💡 Seu projeto ficou pronto? Coloque ele no ar com a Hostinger e ganhe até 20% de desconto:
hostinger.com.br?REFERRALCODE=1BRUNO76
✅ ME SIGA NAS REDES SOCIAIS
🔹 Instagram: bit.ly/3DHrMdj
🔹 GitHub: bit.ly/3tVboSS
✅ Participe da nossa comunidade no Facebook:
bit.ly/3vaJdiy
✅ SE LIGA SÓ
🔹 Meu objetivo é levar o mundo da computação para todos. Você deve saber, né? Existem muitas vagas de emprego para poucos profissionais no mercado. E assim como eu você quer crescer no mundo da programação me acompanhe aqui no canal: / inteliogiatech
✅ Bibliografia que recomendo:
🔹 HTML 5. Entendendo E Executando: amzn.to/41y7YUw
🔹 HTML5 e CSS3: guia prático e visual: amzn.to/3Hbg1yv
🔹 Use a cabeça! HTML e CSS: amzn.to/3Lq5P84
🔹 JavaScript: O Guia Definitivo: amzn.to/3L3cuDu
✅ EMAIL PARA CONTATO EMPRESARIAL (não tiro dúvidas por aqui):
🔹 contato@inteliogia.com
✅ É isso #programMaker, seguimos por aqui, codando 👨🏼‍💻

Опубликовано:

 

28 апр 2023

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 82   
@helpjt
@helpjt 27 дней назад
tu e brabo mano +1 inscrito ! Quebra tudo pai !
@vagnerkavallera
@vagnerkavallera 11 месяцев назад
Meu amigo que da hora! Continua esse projeto que tá massa, fiz umas mudanças mas serviu como base e ta ficando top, mais um inscrito, tu merece muito mais ! abração!!!
@tillylima8823
@tillylima8823 10 месяцев назад
MUITO BOM!!! Obrigada por esse vídeo maravilhoso
@linosouza8871
@linosouza8871 11 месяцев назад
Perfeito, obrigado por compartilhar.
@ThiagosantiagoRodrigues
@ThiagosantiagoRodrigues 9 месяцев назад
Brabo de mais man, parabéns....
@jhonywuanderson7278
@jhonywuanderson7278 Год назад
belo trabalho !!!!!!!!!
@danieloliveira9595
@danieloliveira9595 Год назад
que aula top!! ganhou mais um inscrito!!
@Magi_Star
@Magi_Star 10 месяцев назад
gostei mt do jeito que vc explica. tmj
@elvispresley1728
@elvispresley1728 Год назад
excelente video mano. bastante simples e objetivo
@djamilacorreia
@djamilacorreia 11 месяцев назад
Muito obrigada você é um espetáculo.
@espedito-et--sapientia
@espedito-et--sapientia 6 месяцев назад
Muito Bom Mano
@rafaeldoliveira5684
@rafaeldoliveira5684 Год назад
Parabéns pela aula , continue fazendo vídeos como esse, show , bora codar.
@KleberLucasDeveloper
@KleberLucasDeveloper 9 месяцев назад
Você é brabo ensinando, ta de parabéns irmão!
@misaelsapiente4124
@misaelsapiente4124 6 месяцев назад
Bela explicação. parabens!!
@axloliveira6223
@axloliveira6223 Год назад
muito bom, parabéns pela didatica, ganhou mais um inscrito
@luispaulomoraes2692
@luispaulomoraes2692 7 месяцев назад
Vai ser base do meu TCC parabéns +1 inscrito
@lucianamoreira253
@lucianamoreira253 5 месяцев назад
Gostei da aula mais um inscrito muito top
@jefersonsena8239
@jefersonsena8239 3 месяца назад
Muito bom cara, Parabéns!!
@guilhermecode2964
@guilhermecode2964 Год назад
Muito obrigado pelo tutorial, aprendo bastante contigo, parabéns!
@rafaelmotadev
@rafaelmotadev 8 месяцев назад
Excelente! Ajudou bastante! Obrigado!
@brunohenriquerodriguesdeol7392
@brunohenriquerodriguesdeol7392 3 месяца назад
me ajudou muito mano! OBRIGADO!!!!!
@caiopertence1771
@caiopertence1771 11 месяцев назад
Ta maluco, muito brabo!!!! Obrigado irmão, aprendi muito nesse vídeo
@renan5460
@renan5460 Год назад
Muito bom!
@ice_soldier_x8452
@ice_soldier_x8452 9 месяцев назад
Muito obirgado mano, me ajudou demais a fazer meu TCC. + 1 inscrito
@Pissinet
@Pissinet 6 месяцев назад
Muito obrigado, gostei muito do seu método de encimou, era exatamente o que eu precisava!
@HBcanall
@HBcanall Год назад
era isso que eu estava procurando! A maioria ensina de uma forma automatizada e tudo mais, porém gosto de criar cada coisa eu mesmo, com código e o escambau klkkkkkkkk obg!
@InteliogiaDev
@InteliogiaDev Год назад
Concordo com vc hehehe, eu prefiro criar cada coisa, deixa a gente mais profissional e na minha opinião é mais gratificante kkkkkkk
@vitorsousaenjoy
@vitorsousaenjoy 7 месяцев назад
Estou impressionado com a didática que você explicou, incrível parabéns pelo seu trabalho ! ganhou mais um inscrito !
@vhyxennlol619
@vhyxennlol619 Год назад
consegui também!! Obrigado pelo videoooo
@Bruno_Sant
@Bruno_Sant 27 дней назад
Cara, muito bom seus vídeos, parabéns
@annie-mo1bm
@annie-mo1bm 3 месяца назад
vídeo incrível me tirou uma dúvida que precisava resolver para meu projeto, valeu demais
@Guerreir0A297
@Guerreir0A297 28 дней назад
Valeu mano, minha navbar ficou bela, tamo junto
@LucianoSB26
@LucianoSB26 12 дней назад
Legal parabéns mais uma dúvida pq o window não poderia ser alguma tag exemplo html?
@animaisfelizes1723
@animaisfelizes1723 4 месяца назад
Mano pela primeira vez eu consegui ler o js com sua explicação caracaaaa #dompraensinar rsrsrs
@ivandrosantana3906
@ivandrosantana3906 11 месяцев назад
Muito bom
@guhhdeadm7291
@guhhdeadm7291 12 дней назад
Mermão isso foi do caralho obrigado
@MicaelAbreu
@MicaelAbreu Год назад
demaissss
@AdemarMorais-bv4bv
@AdemarMorais-bv4bv 3 месяца назад
muito show esta video aula! Cara . . . se não for pedir demais, converta para nós este Menu em responsivo!
@felipegueller8950
@felipegueller8950 Год назад
Simples e didático, meus parabéns! 👏
@InteliogiaDev
@InteliogiaDev Год назад
Hehehe tamo junto mano Felipe 👊🏾😉
@sagagamerxd
@sagagamerxd 3 месяца назад
Muito perfeito, gostaria de ver sendo feito em React
@marcellyeduarda4272
@marcellyeduarda4272 5 месяцев назад
faz mais projetos utilizando JavaScript ☺
@SafiraAndJunielle
@SafiraAndJunielle Год назад
top
@otimizem
@otimizem 11 месяцев назад
Incrível a sua didática. Fácil de entender. Parabéns. Acabei de me inscrever nesse canal!!!
@InteliogiaDev
@InteliogiaDev 11 месяцев назад
Seja bem vindo Ramon 😁 Muito obrigado!
@fabionexo1880
@fabionexo1880 11 месяцев назад
Falo diretamente de Angola, foi muito útil o seu vídeo, por favor continua a e trás curso de JavaScript.
@InteliogiaDev
@InteliogiaDev 11 месяцев назад
Fala Fabio, eu agradeço pela sua sugestão. To elaborando trazer conteúdos desse tipo em breve.
@fabionexo1880
@fabionexo1880 11 месяцев назад
@@InteliogiaDev muito obrigado, ganhaste mais um aluno que fala de Angola.❤️
@soielumsay
@soielumsay 8 месяцев назад
cara, muito obrigada pelo tutorial, tinha tempos que eu queria aprender esse efeito e não conseguia! tenho uma duvida sobre a questão responsividade, como faço pra aplicar esse efeito no menu quando ele for pra telas menores? pois eu testei e não foi aplicado. agradeço se puder me dar uma ajuda nisso :D
@viniciocoelho3538
@viniciocoelho3538 9 месяцев назад
Se vc utilizar a propriedade defer na chamada do JS, vc pode coloca-lo no head. Valeu.
@adilson-fernando
@adilson-fernando Год назад
Foi show a aula, estava precisando, pois me limitava apenas em usar frameworks que as vezes me atrapalham
@InteliogiaDev
@InteliogiaDev Год назад
Frameworks ajuda e ajuda muito! Porém faz a gente ficar mal acostumado kkkkkkk prefiro usar os códigos puros msm
@luizantonio2886
@luizantonio2886 2 месяца назад
Qual o tema do vs code foi utilizado no vídeo ? achei muito legal
@kevinthiago9875
@kevinthiago9875 2 месяца назад
simplesmente perfeito. pena que até fazendo o código IGUAL ao seu o meu fica feio, as coisas não ficam no lugar, nada funciona como eh pra funcionar!
@joaotamborindeguy
@joaotamborindeguy Месяц назад
tem como adicionar um menu habuger ao prjeto?
@junioalves5054
@junioalves5054 4 месяца назад
Vc tem algum vídeo da criação das páginas que vão dentro dos menus,exemplo desse vídeo dentro de passagens ao clicar nele....se tiver me passe o link do vídeo, se não tem faz um vídeo pra nós,eu comecei agora como técnico em informática e html esta junto quero fazer ......sites e outros....
@willvenus3707
@willvenus3707 11 месяцев назад
Fala cara!! Muito bom seu conteúdo. Só me tira uma dúvida: Como eu faço pra alterar a logo nessa transição?
@InteliogiaDev
@InteliogiaDev 11 месяцев назад
Fala cara, blz? Então mano vc precisa alterar esconder a logo antiga e exibir a logo nova sempre que a classe criada no JavaScript existir. Por exemplo, no vídeo eu criei a classe 'rolagem' e sempre que ela existir vai mudar a cor de fundo do menu e encolhê-lo também. Partindo dessa ideia vc pode criar uma classe para cada logo e atribuir a propriedade de "display: block" sempre que a classe 'rolagem' existir e "display: none" sempre que não existir a classe 'rolagem'
@willvenus3707
@willvenus3707 11 месяцев назад
@@InteliogiaDev Fiz dessa forma e deu certo!!! Muito obrigado mano.
@alessandrorodrigues6849
@alessandrorodrigues6849 5 месяцев назад
Ficou muito bom, só não ta um menu Transparente né? kk abraços!
@danielcampillo9679
@danielcampillo9679 5 месяцев назад
Ola, tudo bem? Como eu faria p/ que de acordo com a rolagem da paginas, as imagens não ficassem por cima do menu, mas sim desaparecessem
@vhyxennlol619
@vhyxennlol619 Год назад
CONSEGUII mas meu menu nao fica colado na margin T.T, fica um espaço mesmo ele estando fixo e ocupado toda a largura para o lado esquerdo >
@caiodetz4743
@caiodetz4743 Год назад
qual o nome do estilo do banner o estilo da imagem
@AlphaFox03
@AlphaFox03 Год назад
Qual tema você está usando no Visual Studio?
@InteliogiaDev
@InteliogiaDev Год назад
Fala mano, eu tô usando a One Dark Pro. É um pack com vários temas e que vc pode baixar diretamente pela loja de extensões do VS
@vhyxennlol619
@vhyxennlol619 Год назад
é pra mim nao deu certo :( Tem que instalar alguma extensão do java script? Ou so a do java da certo?
@natalialeitura5389
@natalialeitura5389 Месяц назад
meu flex não funcionou de jeito nenhum :(
@anonimus007_
@anonimus007_ 11 месяцев назад
Eu to com problema na logo, na tag , eu não to conseguindo colocar a logo/imagem
@InteliogiaDev
@InteliogiaDev 11 месяцев назад
Confere se vc fez o link da biblioteca de ícones certinho 😉 Outra coisa é que eu usei o ícone apenas para exemplificar... vc pode colocar a sua logo por exemplo...
@anonimus007_
@anonimus007_ 11 месяцев назад
@@InteliogiaDev Aaa tá, vlw, muito obrigado vou ver se vai e eu vouto pra falar, muito obrigado
@anonimus007_
@anonimus007_ 11 месяцев назад
@@InteliogiaDev Aeeee conseguii, muito obg
@ice_soldier_x8452
@ice_soldier_x8452 9 месяцев назад
e se ao inves de mudar icone de cor na rolagem eu quisesse mudar minha logo que no caso é uma img ?
@InteliogiaDev
@InteliogiaDev 8 месяцев назад
Vou fazer um vídeo ensinando melhor isso. Mas vc pode usar classes mano, uma das imagens vc deixa com display block e a outra com display none. Quando o usuário rolar vc pode só inverter, a que tinha display block passa a ser none e a que tinha display none, passa a ser block. Certifique-se de que as imagens terão a msm dimensão e que as cores realmente faça um contraste.
@ice_soldier_x8452
@ice_soldier_x8452 8 месяцев назад
@@InteliogiaDevconsegui meu mano, muito obrigado pela resposta.
@alexandrecruv
@alexandrecruv 8 месяцев назад
2 comentários - 1 - Quando você fez o corte aos 13min para estilizar, não informou como colocou o texto no meio da tela. 2 - Com meu monitor é 34 ultra-wide e removi o background position para que a imagem que escolhi ficasse perfeita na tela.
@InteliogiaDev
@InteliogiaDev 7 месяцев назад
Fala Alexandre. Então... O foco do vídeo era só criar o menu kkkkk a imagem e texto que tão no fundo são apenas para deixar o projeto mais bonito no vídeo, por isso não ensinei kkkkkkkk
@MaauMaau7
@MaauMaau7 5 месяцев назад
Voce pode utilizar uma class no h1 da section e atualizar com margin auto pra centralizar class="h1-content" css .h1-content { margin: auto;}
@clipsviraisdelives
@clipsviraisdelives 9 месяцев назад
So nao consegui enteder a parte do icone do Globo e nao to conseguindo fazer
@InteliogiaDev
@InteliogiaDev 8 месяцев назад
É um exemplo, no lugar daquele ícone vai a sua logotipo, mas se vc quiser colocar um ícone, vc pode usar a biblioteca da bootstrap icons, eu ensino a criar em diversos vídeos aqui do canal
@clipsviraisdelives
@clipsviraisdelives 8 месяцев назад
vlw meu rei, nao sabia do bootstrap ainda!@@InteliogiaDev
@leo._.1741
@leo._.1741 2 месяца назад
copiei literalmente igual ao vídeo mas o meu javascript não funciona não sei pq está idêntico ao vídeo
@rogeriomarques3940
@rogeriomarques3940 21 день назад
Eu também não tava conseguindo por isso: ao invés de eu estava colocando t src="menu.js".