サイトを訪れると「ブックマークをしてください。」などの吹き出しが、表示される事があると思います。
このページにも仕掛けを行っていたので、最初に表示した時に、下の方にポップアップが表示されたと思います。
使いどころを間違えると鬱陶しくもありますが、うまく使えば効果があると思います。
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の処理を入れ込むには、通常とはまた違う事を行わないといけません。
そのあたりの事は、また、今度紹介します。
ブックマークしてね! (ブックマークはできません)
邪魔なら触ってね。すぐ消えます。