バルーンポップアップ

2014/11/21

サイトを訪れると「ブックマークをしてください。」などの吹き出しが、表示される事があると思います。

このページにも仕掛けを行っていたので、最初に表示した時に、下の方にポップアップが表示されたと思います。
使いどころを間違えると鬱陶しくもありますが、うまく使えば効果があると思います。

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の処理を入れ込むには、通常とはまた違う事を行わないといけません。
そのあたりの事は、また、今度紹介します。