サイトを訪れると「ブックマークをしてください。」などの吹き出しが、表示される事があると思います。
このページにも仕掛けを行っていたので、最初に表示した時に、下の方にポップアップが表示されたと思います。
使いどころを間違えると鬱陶しくもありますが、うまく使えば効果があると思います。
window.onload = function (){ var left = Math.floor(($(window).width() - $("#popup").width()) / 2) -10; var top = Math.floor(($(window).height() - $("#popup").height())) - 40; $("#popup") .css({ "top":window.innerHeight, "left":left, }) .animate({top: top-30}, 500) .animate({top: top}, 1000) .delay(5000) .fadeOut(800); $("#popup").click(function () { $(this).stop().fadeOut(200); }); }
1行目
window.onload = function (){
記事が読み込まれたら、JavaScriptを実行します。
2-3行目
ポップアップの表示位置を設定しています。
5-13行目
CSSによるアニメーション設定です。表示時間も設定しています。
15-17行目
ポップアップ部をクリックすると消える処理を組み込んでいます。
尚、WordPressでは、この記事のように、記事ごとにJavaScriptの処理を入れ込むには、通常とはまた違う事を行わないといけません。
そのあたりの事は、また、今度紹介します。
ブックマークしてね! (ブックマークはできません)
邪魔なら触ってね。すぐ消えます。