ThosuZ

Olá, pessoal! Estou tentando criar um menu que, quando rola o scroll, ele muda (diminui o height e adiciona um background). Porém, aparentemente, nenhum código js tá funcionando... já tentei bastante coisa. Um dos tutoriais que usei: https://www.anicasagrande.com.br/menu-fixo-no-topo-que-muda-cor-com-rolagem/ Como fiz: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script type="text/javascript"> (function () { var menu = document.getElementById('menuone'); // colocar em cache window.addEventListener('scroll', function () { if (window.scrollY > 50) menu.classList.add('menutwo'); // > 0 ou outro valor desejado else menu.classList.remove('menutwo'); }); })(); </script> <div class="menuone"> <nav class="menufixo"> <div class="menucenter"> <ul class="menu"> <li class="logomenu"><img class="iconmenu" src="images/logotipo-amarelo.png" width="105px" height="100%"/></li> <li class="menulinks"><a class="botoesmenu" href="#">Home</a></li> <li class="menulinks"><a class="botoesmenu" href="#">Serviços</a></li> <li class="menulinks"><a class="botoesmenu" href="#">Portfólio</a></li> <li class="menulinks"><a class="botoesmenu" href="#">Quem somos</a></li> <li class="menulinks"><a class="botoesmenu" href="#">Contato</a></li> </ul> </div> </nav> </div> <div class="menutwo"> <nav class="menususpenso"> <div class="menucentertwo"> <ul class="menut"> <li class="logomenut"><img class="iconmenut" src="images/Isotipo-amarelo.png" width="38px" height="100%"/></li> <li class="menulinkst"><a class="botoesmenut" href="#">Home</a></li> <li class="menulinkst"><a class="botoesmenut" href="#">Serviços</a></li> <li class="menulinkst"><a class="botoesmenut" href="#">Portfólio</a></li> <li class="menulinkst"><a class="botoesmenut" href="#">Quem somos</a></li> <li class="menulinkst"><a class="botoesmenut" href="#">Contato</a></li> </ul> </div> </nav> </div> /* Menu settings before scrolling */ .menuone { display: block; } .menufixo { padding: 1px; margin: 10px -8px -8px -8px; position: fixed; top: 5; left: 2; width: 100%; } .menucenter { width: 1200px; margin: 0 auto; } .menu { text-transform: uppercase; list-style: none; } .logomenu { margin-right: 500px; display: inline-block; } .iconmenu { margin: -15px; } .botoesmenu { color: #f7c620; font-family: 'Bahnschrift Light', sans-serif; text-decoration: none; transition: color 1s; padding: 10px; } .botoesmenu:hover { color: #fff; } .menulinks { color: #fff; display: inline-block; margin: 8px; } /* Menu settings after scrolling */ .menutwo { display: block; } .menususpenso { padding: 1px; margin: 0px -8px; position: fixed; top: 5; left: 2; width: 100%; background: #8c05bd; } .menucentertwo { width: 1200px; margin: 0 auto; } .menut { text-transform: uppercase; list-style: none; } .logomenut { margin-right: 500px; display: inline-block; } .iconmenut { margin: -13px; } .botoesmenut { color: #f7c620; font-family: 'Bahnschrift Light', sans-serif; text-decoration: none; transition: color 1s; padding: 10px; } .botoesmenut:hover { color: #fff; } .menulinkst { color: #fff; display: inline-block; margin: 0 8px; } Perdão pelos códigos grandes. Gostaria muito de uma orientação pra conseguir fazer, mas queria muito manter a atual estilização do menu.

Boa tarde, pessoal! Minha dúvida é simples. Gostaria de saber apenas o nome da animação desse site: https://www.think-mario.com/ Quero o nome pra pesquisar sobre e aprender. A animação é quando vamos abaixando o scroll, as coisas vão surgindo, e eu acredito que seja com js. Abraços!

Fiz .fcenter{display:flex} e funcionou, valeu!

Olá, pessoal! Estou com problemas pra organizar meu rodapé. Quero deixar da seguinte forma: as informações de contato e um formulário lado a lado, e em baixo as informações padrões de um rodapé ("Copyright 2020 etc"). Eu criei uma div pras informações de contato e outra pro formulário, setei float: left e right pra eles respectivamente, mas a terceira div (Copyright) ficou no meio, não em baixo. Como resolvo? HTML: <footer> <div class="fcenter"> <div class="infos"> <p class="ftitulo">Águia Publicidade</p> <p class="finfos">Rua Treze de Maio, 191</p> <p class="finfos">Ed. Marc Jacob, sala 504</p> <p class="finfos">(91) 99182-4761</p> <p class="finfos">contato@aguiapublicidade.com</p> </div> <div class="contato"> <p class="ftitulo">Contate-nos</p> <form action="enviar.php" method="post" class="rodape"> <p class="formu">Nome: </p><input type="text"> </form> </div> </div> <div class="copyright"> <p class="rodape">&copy; Todos os direitos reservados. Desenvolvido por Arthur, designer da Águia&reg; Publicidade.</p> </div> </footer> CSS: /* footer settings */ footer { background-color: #303030; color: #fff; margin: 0px -8px 0px -8px; } .fcenter { width: 500px; margin: 0 auto; } .infos { float: left; } .contato { float: right; } Como ficou: Como eu gostaria que ficasse mais ou menos: http://miritigrafica.com.br/#faleconosco

Olá, pessoal. Perdoem-me pelo título horrível, eu realmente não sei como resumir. Gostaria de saber qual o nome e com que linguagem é feita aquele pequena animação que alguns sites possuem, que é quando você vai rodando o scroll pra baixo e aos poucos os objetos vão aparecendo sem desaparecer quando você volta o scroll pra cima. Gostaria de saber apenas o nome pra poder procurar tutoriais e afins. Exemplo: https://ribetav.46graus.com/ notem que os objetos vão aparecendo aos poucos.

Olá, pessoal! Me desculpem caso eu tenha errado o lugar para fazer tal pergunta. Vamos lá, minha dúvida é até que simples. Estou desenvolvendo um site em HTML5, fiz um formulário e estou aprendendo como manipular os dados do formulário em php. Concluí que farei um arquivo separado (.php), mas por ele ser programação, ele não irá rodar em um navegador. Procurei a respeito e vi que ele roda com programas tipo XAMPP (com a localhost etc), pois ele precisa rodar com o servidor, certo? Minha dúvida é: sendo dessa forma, eu não posso comprar uma hospedagem comum de sites e colocar o arquivo lá. Então, nesse caso, eu preciso hospedar meu site em uma VPS utilizando programas como XAMPP ou WebServer? Ou há uma forma de inseri-lo na hospedagem de sites (ou até mesmo dentro do próprio arquivo HTML)? Agradeço pela ajuda, abraços.

Olá, pessoal. Tudo bom? Estou com um problema aqui. Criei uns links em um site pra levarem pra uma galeria, são imagens que estão lado a lado, cada uma com a imagem principal de cada galeria. O problema é: eu criei elas como background de li's de uma ul. Coloquei um <span> dentro da tag <li> pra poder aparecer o nome da galeria quando passar o mouse por cima. Observem o código: HTML: <ul id="artefotos"> <a href="lorena.html" target="_self" class="glink"><li id="ft01"><span>Lorena Frazzão</span></li></a> <a href="vivian.html" target="_self" class="glink"><li id="ft02"><span>Vivian Nadine</span></li></a> <a href="paula.html" target="_self" class="glink"><li id="ft03"><span>Paula Bernardes</span></li></a> <a href="anaclara.html" target="_self" class="glink"><li id="ft04"><span>Ana Clara</span></li></a> <a href="marcus.html" target="_self" class="glink"><li id="ft05"><span>Marcus Visasi</span></li></a> <a href="davi.html" target="_self" class="glink"><li id="ft06"><span>Davi Serrano</span></li></a> <a href="rafaejr.html" target="_self" class="glink"><li id="ft07"><span>Rafaela & Jr</span></li></a> </ul> CSS: ul#artefotos li span { font-size: 15pt; text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); line-height: 1120px; padding: 10px; opacity: 0; transition: 0.5s; } ul#artefotos li:hover span { opacity: 1; background-color: rgba(0, 0, 0, 0.5); } a.glink { color: #fff; } ul#artefotos { width: 1470px; margin: 0 auto; margin-top: -20px; padding: 25px; overflow: hidden; list-style: none; } ul#artefotos li { float: left; width: 200px; height: 600px; margin: 5px; background-color: #363636; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); } ul#artefotos li#ft01 { background: url('../_images/_essays/_lorena/IMG_2651.jpg') no-repeat; background-position: 50% 50%; background-size: 400px; } ul#artefotos li#ft01:hover { background: url('../_images/_essays/_lorena/IMG_2651.jpg') no-repeat; background-position: 50% 50%; background-size: 400px; filter: opacity(25%); } Porém, na última seção do CSS, eu coloquei um :hover pra quando passar o mouse, o fundo ficar menos opaco e a tipografia mais legível. Mas a tipografia também ficou menos opaca, já tentei colocar esse :hover no span como background: rgba(0,0,0,0.5); mas também não deu certo, porque ele fica apenas um retângulo em volta dele. Alguém sabe como resolver pra deixar toda a imagem menos opaca e a tipografia normal quando passar o mouse? Valeu!

Eu tinha pensado em fazer dessa forma, mas eu preferi background pra ter um controle maior das dimensões das imagens... mas já que é a única solução, vou usar <img>, e como já defini o tamanho que quero, vou cortar as imagens com essas dimensões. Valeu!