Ajouter une petite animation à l'apparition d'un pop-up.
C'est en voyant la page illustrant la "librairie css" Animate.css que
j'ai eu envie de récupérer un de ces effets pour l'appliquer à un pop up.
Pour voir le plop-up, Cliquer ici ! S'il vous plaît.
<div id="popshowfoto"> <div id="inpopshowfoto"> <div id="close_popshowfoto">Fermer</div> <div id="photo" class="thumbnail">Cet emplacement pourrait être occupé par une photo ...</div> <div id="titlephoto">Un titre, court ou long, peu importe ...</div> </div> </div>
$(function(){
$('#showpop').on('click', function(){
$('#popshowfoto').addClass('bounceIn').show();
return false;
})
$('#close_popshowfoto').on('click', function(){
$('#popshowfoto').removeClass('bounceIn').hide();
})
})
/* répéter cette déclaration avec les préfixes propriétaires:
* @-webkit-keyframes
* @-moz-keyframes
* @-o-keyframes--- */
@keyframes bounceIn {
0% { opacity: 0; transform: scale(.3); }
50% { opacity: 1; transform: scale(1.05); }
70% { transform: scale(.9); }
100% { transform: scale(1); }
}
.bounceIn {
-webkit-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: bounceIn;
-moz-animation-name: bounceIn;
-o-animation-name: bounceIn;
animation-name: bounceIn;
}
L'effet n'est évidement visible que sur les navigateurs capables de représenter les transitions css3, pour les autres, le pop-up apparaîtra tout de même, mais sans faire Plop ... Flop.