Jump to content
juliosena

Banner flutuante

Recommended Posts

Boa tarde pessoal,

 

Eu gostaria de fazer um banner que aparece na frente de várias páginas, mas não sei o nome para encontrar como faz. Se alguém souber o nome ou como é feito.

 

O exemplo do banner é esse de cadastro que abre na hora que você abre esse site: https://englishlive.ef.com/pt-br/

 

Está em anexo a imagem para vocês verem.

 

Desde já agradeço

banner.jpg

Share this post


Link to post
Share on other sites

isso pode ser feito dentro de uma div de altura e largura 100% e inicialmente com display:none pra ela ficar oculta e bota o display:block ou display:inline-block quando precisar dela. e pra ficar semitransparente basta usar background-color:rgba(0,0,0,0.7) por exemplo

Share this post


Link to post
Share on other sites

o problema do popup é que eles costumam ser bloqueados e muitas vezes acaba dependendo do usuário permitir e em alguns casos eles nem vê o navegador informar que o site tá tentando abrir um pop up pra ir lá permitir e acaba achando que a coisa não tá funcionando.

  • +1 1

Share this post


Link to post
Share on other sites

essa página de exemplo passada no link mesmo usa uma div e to até dando uma olhada no código fonte da página aqui e pesquisando os termos que aparecem dentro dela achei o nome da classe da div e depois pesquisando os css incorporados na página achei o que tem a classe dela lá onde a mesma tem o atributo display:none como falei hehehe se tu der uma estudada no código fonte e abrir os csss incorporados talvez ajude a entender. esse é o link do arquivo css que tá a classe dessa div e o nome da classe é lgtbx-text procura ela lá com um Alt+F que vai achar os atributos dela.

  • +1 1

Share this post


Link to post
Share on other sites

isso pode ser feito com session tipo

 

if(!isset($_SESSION['primeira_vez'])){
    // mostra a janelinha da div aqui
    $_SESSION['primeira_vez'] = '';
}

 

o script está dizendo que se a session primeira_vez ainda não existir, mostra a janelinha e cria a session. na próxima abertura a session já vai existir e aí não exibe mais. nesse caso display deve ser block ou inline-block ou talvez nem precisa dele só não deve ser none

Share this post


Link to post
Share on other sites

Só para concluir a pergunta, fiz aqui e deu certinho, fiz igual o Marsolim recomendou:

 

HTML:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Menu Lateral com CSS</title>
	<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="_css/style.css">
	<script src="_js/CodigoMenu.js"></script>
</head>
<body>
	
<input type="checkbox" id="check">
<label id="botaoAbrir" for="check"></label>


</body>
</html>

CSS:

body {
	margin: 0px;
	padding: 0px; 
}

#check{
	display: none;
}

#check:checked ~ #botaoAbrir {
	
	-webkit-transform: translate(0px, -2080px);
	   -moz-transform: translate(0px, -2080px);
	    -ms-transform: translate(0px, -2080px);
	     -o-transform: translate(0px, -2080px);
	        transform: translate(0px, -2080px);
}


#botaoAbrir{
	
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: contain;
	background-image: url("../_imagens/4fiboTalks.jpg");
	curso: pointer;
	width: 100%;
	height: 100%;
	position: fixed;
	background-color: rgba(0, 0, 0, 0.8);
	-webkit-transition: 1.0s;
	   -moz-transition: 1.0s;
	    -ms-transition: 1.0s;
	     -o-transition: 1.0s;
	        transition: 1.0s;
}

#botaoAbrir:HOVER{
	background-color: rgba(0, 0, 0, 0.9);
}

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By guialacerda
      Alguem me recomenda um plugin para colocar popups no wordpress? Vou usar imagens, tipo vou por uns 4 banners popup aleatórios.
    • By thiago wendel
      boa tarde, sou novo na área e estou com um problema no site que preciso colocar o banner da home em modo carrossel automático para mudar sozinho
      o site e www.edicoescnbb.com.br , segue em anexo também a imagem

    • By Fernando Mello
      Olá boa tarde !
       
      Tenho um código em HTML que eu consegui colocar 2 imagens rotativas mas precisava de no mínimo 5... não estou conseguindo aumentar!
      Alguém poderia me ajudar?
       
      Segue o código.
      <section id="elemento-slider" class="intro-block full-slider no-sep cover-bg" data-selector="section" style="background: none 0% 0% repeat scroll rgb(221, 221, 221);"> <div id="carousel-full-header" class="carousel slide carousel-full" data-ride="carousel"> <div role="listbox" class="carousel-inner"> <div class="item"> <div class="container section-padding"> <div class="row"> <div class="col-md-12 editContent" data-selector=".col-md-12"> <img class="img-responsive center-block" src="https://blob.llimages.com/machine-user-images/Banner_Verdade-Letal-img-1588091-20190701125809.jpg" style="padding-bottom: 5%; width: auto; height: auto; border-radius: 0px; border-style: none; border-width: 1px;" alt="" data-selector="img" width="640" height="323"> </div> </div> </div> </div> <div class="item active"> <div class="container section-padding"> <div class="row"> <div class="col-md-12 editContent" data-selector=".col-md-12"> <img class="img-responsive center-block" src="https://blob.llimages.com/machine-user-images/Banner-Contagem-Regressiva-img-1588091-20190701125802.jpg" style="padding-bottom: 5%; width: auto; height: auto; border-radius: 0px; border-style: none; border-width: 1px;" alt="" data-selector="img" width="640" height="323"></div> </div></div></div></div></div></section> <a role="button" class="left carousel-control" href="#carousel-full-header" data-slide="prev"> <span class="arrow" data-selector=".carousel-control .arrow"></span> </a> <a role="button" class="right carousel-control" href="#carousel-full-header" data-slide="next"> <span class="arrow" data-selector=".carousel-control .arrow"></span> </a>  
    • By ianluis
      Procurei por toda a internet e não tem nada que ensine a como colocar propaganda dentro de um player de vídeo não e vídeo do youtube e sim player de vídeo no meu caso e de filme, estou construindo um site de filmes e animes e preciso colocar anúncios para poder pagar a hospedagem e melhorar a qualidade do site para ter mais acessos me ajudem por favor já procurei em toda internet e não tem niguem ensinando só videos de como colocar no youtube e não tem como já que eu não tenho nenhum vídeo armazenando no computador apenas links.
    • By wcordeiroo
      fala galera, sou aqui no forum e novo em html e css também, estou com um problema, espero que alguem consiga me ajudar
      ontem fiz meu primeiro código html/css para um banner de um site, ao visualizar o banner no navegador ele esta correto, mas quando eu publíco o código fonte na minha plataforma que gerenciar o site no espaço que ele deve aparecer, acaba se desconfigurando todo o arquivo, vou colar o codigo aqui e o print dele publicado para verem
       
      <div id=centro align="center"> <div class="container"> <div class="Banner Menu clearfix"> <a href="https://www.armazemk.com.br/tamanco-verniz-nude-0256" target="_blank" title="meu 35"><img src="https://www.armazemk.com.br/img/2019/05/banner/19360/tamanco.jpg" alt="tamanco"/> </a> <h1>meu 35.</h1> <h2>Frete Grátis Sul e Sudeste</h2> <h3>Tamanco Nude</h3> </div> </div> </div> <style><!-- @charset "utf-8"; /* CSS Document */ body { margin-top: 0; margin-left: 0; margin-right: 0; margin-bottom: 0; } .container { width: 1180px; height: 277px; background-color: #F2F2F2; overflow: hidden; } h1 { position: absolute; font-family: times new Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"; font-weight: lighter; font-size: 70px; text-align: center; margin-top: -250px; margin-left: 220px; color: #7F5428; } h2 { position: absolute; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-weight: lighter; font-size: 18px; text-align: center; margin-top: -50px; margin-left: 200px; color: #7F5428; } h3 { position: absolute; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-weight: lighter; font-size: 18px; text-align: center; margin-top: -50px; margin-left: 900px; color: #7F5428; } img { mix-blend-mode: multiply; width: 350px; height: 350px; margin-left: 400px; margin-top: -55px; } --></style>  
      PRINT dele publicado:

       
       
      Exemplo de como deve ficar:

       
       
      espero que consigam me ajudar, ontem pesquisei muito sobre isso, e nao encontrei nada.
       
      valeu
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.