2012-04-23

[jQuery] ページが表示されて少し後にふわっとレイヤーを表示

ページが表示されたら一瞬遅れで、ポップアップのようなレイヤーを表示するjQueryです。
ポップアップを出すのはイヤがられることもありますが、
ちょっと興味を引かせたり、どうしても見てほしい案内を出すときには
やっぱり便利ではないかなと思います。


出しっぱなしではなく、クローズボタンをつけたり、
何秒か表示させたら消すといったこともできるので、そういう工夫もいいかもしれませんね。


<script type=”text/javascript”>
$(window).load(function() {
setTimeout(function () {
$(“#popup”).animate({opacity:’show’, bottom:”55″}, {duration:500, easing:’swing’})
}, 1000);
});
</script>

この例ではページの下のほうに表示するようにしています。
CSSで#popupにdisplay:none;bottom:50px;を指定しています。

Comment:

Trackback URL: