Creare banner inziiale a scomparsa dopo pochi secondi.

**bini2000** · 10-03-2014, 15:32

Salve,
ho bisogno di creare un banner di quelli che compaiano dopo 1-2 secondi che si è entrati nel sito e scompaiono dopo poco o cliccando sulla x.
come si fa?

**carlomarangoni** · 10-03-2014, 16:52

cerca in rete popup modale

**-Lebowski-** · 14-03-2014, 19:03

Tu lo vorresti già bello e pronto, è chiaro

ma è in base alle tue conoscenze, basilari o avanzate che siano, che è possibile fornirti le adeguate risposte
che potrebbero riguardare le animazioni css, javascript, jquery non so.. dipende da te..
Io non sono un esperto ma puoi provare così:

codice:

<head>
<script src="http://code.jquery.com/jquery-1.10.1.js"></script>
</script>
$('.chiudi-banner').click(function () {
   $('.bannerClasse').css({"display":"none"});
});
</script>

<style>
@-webkit-keyframes banner {
     0%   {visibility: hidden;}
     100% {visibility: visible;}
}


.bannerClasse {
     width: 100px;
     height: 100px;
     border: 4px solid black;
     visibility: hidden;
     -webkit-animation:banner 1s linear 4s 1 forwards;
}
</style>
</head>

codice:

<div class="bannerClasse"></div>
<button class="chiudi-banner">Chiudi Banner</button>

http://jsbin.com/johudulu/1/edit

**carlomarangoni** · 15-03-2014, 00:55

Originariamente inviata da -Lebowski-

....

Sembra spidy Gnzales quel banner, non dura neanche mezzo secondo

**-Lebowski-** · 17-03-2014, 13:15

io ho messo tutte e tre le cose: jquery, javascript, css, ora sta a bini2000 approfondire quello che vuole,
mi sembra anche facile da modificare..

L'animazione

codice:

-webkit-animation:banner 1s linear 4s1 forwards;

si può interpretare così:

codice:

-webkit-animation-name: banner;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 4s;
-webkit-animation-iteration-count: 1; /* numero di ripetizioni dell'animaz. */
-webkit-animation-fill-mode: forwards; /* A fine animaz. rimani al punto finale */

poi dagli elementi che gli ho dato può benissimo seguire l'esempio per assegnare un'animazione a quello che vuole..

per tutti i browsers:

codice:

   -webkit-animation:
   -moz-animation:
   -ms-transition:
   -o-animation:
   animation:

http://www.w3schools.com/css/css3_animations.asp

Discussione: Creare banner inziiale a scomparsa dopo pochi secondi.

Strumenti discussione

Ricerca discussione

Visualizza

Creare banner inziiale a scomparsa dopo pochi secondi.

Permessi di invio