Criar modal propaganda.
Modal
Vamos criar uma modal que pode conter propaganda sendo texto
ou imagem variando de acordo com sua necessidade.
Para isso será construída uma estrutura simples em HTML, com um
pouco de CSS para criar o estilo da modal assim como a animação para mostrar e
guardar e por fim um pequeno Javascript para executar a animação.
Primeira parte
No HTML vamos usa uma DIV principal que vai conter a modal,
essa DIV principal será alinhado no centro e no top da pagina sendo fixo na
tela.
Na segunda DIV será a propaganda, dentro dela vai conter um
paragrafo que será onde você vai colocar
sua propaganda e vai conter um botão para desativar.
<div
class="propaganda-alinhar-1">
<div
class="propaganda-1 In-top">
<p>aqui
fica propaganda</p>
<a
href="#" id="fechar1" class="bt-propaganda"
>x</a>
</div>
</div>
Segunda parte.
Essa será um pouco mais demorada, vamos iniciar com o
alinhamento da modal na tela.
.propaganda-alinhar-1 {
width: 100%;
display: flex;
justify-content:
center;
position:
absolute;
overflow: hidden;
position: fixed;
z-index: 3000;
}
.propaganda-alinhar-1{ top: 0;}
Agora com o estilo da modal.
.propaganda-1{
margin:
30px;
background: #000;
width:
50%;
padding:
5px;
border:
3px solid #ffbb00;
border-radius: 6px;
box-shadow: 0 0 20px 10px #000;
z-index:
15;
position:
relative;
}
Estilo do botão de fechar
.propaganda-alinhar-1 .bt-propaganda {
position:
absolute;
font-size: 14px;
text-align: center;
top:
-15px;
right:
-15px;
width:
30px;
height:
30px;
border-radius: 100%;
border:
4px solid #ffbb00;
background: #000;
color:
#ffbb00;
font-family: "PT Mono", monospace;
cursor:
pointer;
box-shadow: 0 4px 4px 0 rgba(0,0,0,.5);
transition: 0.5s;
text-decoration: none;
}
Terceira parte.
Para finalizar o CSS vamos fazer a animações para entrar e
sair do topo.
.In-top {
animation-name:
In-top;
/*animation-delay: 2s;*/
animation-duration: 4s;
animation-fill-mode: both;
}
.Out-top {
animation-name: Out-top;
/*animation-delay: 2s;*/
animation-duration: 2s;
animation-fill-mode: both;
}
@keyframes
In-top {
from
{opacity: 0;
transform:
translate3d(0, -500px, 0); }
30% {
transform:
translate3d(0, 0px, 0); }
50% {
transform:
translate3d(0, -5px, 0); }
100% {
transform:
translate3d(0, 2px, 0); }
to {
transform:
translate3d(0, 0px, 0);
opacity:
1;} }
@keyframes
Out-top {
from
{opacity: 1;
transform:
translate3d(0, 0px, 0); }
30% {
transform:
translate3d(0, -2px, 0); }
50% {
transform:
translate3d(0, 0px, 0); }
100% {
transform:
translate3d(0, 0px, 0); }
to {
transform:
translate3d(0, -500px, 0);
opacity:
0;} }
Até essa etapa a modal já posse estilo e esta alinhado na
tela, mas falta ter a interação e para isso vamos usar o JAVASCRIPT.
Primeiro vamos preparar o botão de fechar.
function propagandaFechar1(){
const trocar1
= document.querySelector('.propaganda-1')
trocar1.classList.remove('In-top')
trocar1.classList.add('Out-top')
setInterval(function(){
trocar1.style.display = "none";
}, 3000);
}
const fechar1 =
document.getElementById('fechar1')
fechar1.addEventListener('click', function(){ propagandaFechar1() })
Para complementar vamos colocar um tempo, assim a modal será fechada mesmo se o usuário não apertar no X.
function
trocarClass(){
const trocar1
= document.querySelector('.propaganda-1')
trocar1.classList.remove('In-top')
trocar1.classList.add('Out-top')
setInterval(function(){
trocar1.style.display = "none";
}, 4000);
}
setInterval(function(){
trocarClass()
}, 30000)
Repare que após 30 segundo a modal será desativada.
Comentários
Postar um comentário