Como criar um Menu Transparente com Efeito de Rolagem
Вставка
- Опубліковано 9 вер 2024
- ✅ 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/program...
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 👨🏼💻
Ajudou muito! Obrigadão.
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!
Concordo com vc hehehe, eu prefiro criar cada coisa, deixa a gente mais profissional e na minha opinião é mais gratificante kkkkkkk
Você é brabo ensinando, ta de parabéns irmão!
gostei mt do jeito que vc explica. tmj
Parabéns pelo conteúdo, explicou tudo perfeito, ao ponto de quem ver realmente entender e não apenas copiar e colar
A ideia do canal é essa msm meu mano. Nada de copiar e colar, quero ensinar de verdade 😁
vídeo incrível me tirou uma dúvida que precisava resolver para meu projeto, valeu demais
Valeu mano, minha navbar ficou bela, tamo junto
Parabéns pela aula , continue fazendo vídeos como esse, show , bora codar.
Ta maluco, muito brabo!!!! Obrigado irmão, aprendi muito nesse vídeo
Muito obrigado, gostei muito do seu método de encimou, era exatamente o que eu precisava!
Simples e didático, meus parabéns! 👏
Hehehe tamo junto mano Felipe 👊🏾😉
poooo aí sim! ficou mt maneiro! brigadão!
Estou impressionado com a didática que você explicou, incrível parabéns pelo seu trabalho ! ganhou mais um inscrito !
Cara, muito bom seus vídeos, parabéns
Incrível a sua didática. Fácil de entender. Parabéns. Acabei de me inscrever nesse canal!!!
Seja bem vindo Ramon 😁 Muito obrigado!
Falo diretamente de Angola, foi muito útil o seu vídeo, por favor continua a e trás curso de JavaScript.
Fala Fabio, eu agradeço pela sua sugestão. To elaborando trazer conteúdos desse tipo em breve.
@@InteliogiaDev muito obrigado, ganhaste mais um aluno que fala de Angola.❤️
muito show esta video aula! Cara . . . se não for pedir demais, converta para nós este Menu em responsivo!
Mano pela primeira vez eu consegui ler o js com sua explicação caracaaaa #dompraensinar rsrsrs
Muito obrigada você é um espetáculo.
tu e brabo mano +1 inscrito ! Quebra tudo pai !
faz mais projetos utilizando JavaScript ☺
Vai ser base do meu TCC parabéns +1 inscrito
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!!!
+1 inscrito!
Mermão isso foi do caralho obrigado
Muito obrigado pelo tutorial, aprendo bastante contigo, parabéns!
muito bom, parabéns pela didatica, ganhou mais um inscrito
Muito obirgado mano, me ajudou demais a fazer meu TCC. + 1 inscrito
consegui também!!
Obrigado pelo videoooo
Excelente! Ajudou bastante! Obrigado!
Foi show a aula, estava precisando, pois me limitava apenas em usar frameworks que as vezes me atrapalham
Frameworks ajuda e ajuda muito! Porém faz a gente ficar mal acostumado kkkkkkk prefiro usar os códigos puros msm
Perfeito, obrigado por compartilhar.
me ajudou muito mano! OBRIGADO!!!!!
excelente video mano. bastante simples e objetivo
Muito perfeito, gostaria de ver sendo feito em React
Muito bom cara, Parabéns!!
Top demais!
valeu mesmo mano, já estou escrito no seu canal
EU TE AMO LINDO
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!
Bela explicação. parabens!!
Gostei da aula mais um inscrito muito top
MUITO BOM!!! Obrigada por esse vídeo maravilhoso
Brabo de mais man, parabéns....
Fala cara!! Muito bom seu conteúdo. Só me tira uma dúvida: Como eu faço pra alterar a logo nessa transição?
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'
@@InteliogiaDev Fiz dessa forma e deu certo!!! Muito obrigado mano.
Legal parabéns mais uma dúvida pq o window não poderia ser alguma tag exemplo html?
belo trabalho !!!!!!!!!
Se vc utilizar a propriedade defer na chamada do JS, vc pode coloca-lo no head. Valeu.
que aula top!! ganhou mais um inscrito!!
Qual o tema do vs code foi utilizado no vídeo ? achei muito legal
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
Muito bom!
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....
tem como adicionar um menu habuger ao prjeto?
Muito Bom Mano
demaissss
Eu to com problema na logo, na tag , eu não to conseguindo colocar a logo/imagem
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...
@@InteliogiaDev Aaa tá, vlw, muito obrigado vou ver se vai e eu vouto pra falar, muito obrigado
@@InteliogiaDev Aeeee conseguii, muito obg
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
Muito bom
Qual tema você está usando no Visual Studio?
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
top
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 >
e se ao inves de mudar icone de cor na rolagem eu quisesse mudar minha logo que no caso é uma img ?
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.
@@InteliogiaDevconsegui meu mano, muito obrigado pela resposta.
qual o nome do estilo do banner o estilo da imagem
Ficou muito bom, só não ta um menu Transparente né? kk abraços!
meu flex não funcionou de jeito nenhum :(
So nao consegui enteder a parte do icone do Globo e nao to conseguindo fazer
É 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
vlw meu rei, nao sabia do bootstrap ainda!@@InteliogiaDev
é pra mim nao deu certo :(
Tem que instalar alguma extensão do java script? Ou so a do java da certo?
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.
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
Voce pode utilizar uma class no h1 da section e atualizar com margin auto pra centralizar
class="h1-content"
css
.h1-content { margin: auto;}
copiei literalmente igual ao vídeo mas o meu javascript não funciona não sei pq está idêntico ao vídeo
Eu também não tava conseguindo por isso: ao invés de eu estava colocando t src="menu.js".