[JS]パネルをスムースなスライドで表示するスクリプト -Overlay with Slide Out Box

サイト構築 -JavaScript

メッセージボックスを半透明なオーバーレイ上にアニメーションで表示するチュートリアルをCodropsから紹介します。

CSS and jQuery Tutorial: Overlay with Slide Out Box
demo

デフォルトの画面は下記のようになっており、左上の隅「click me」のクリックがトリガーとなっています。

デフォルトの画面

メッセージボックスのスタイルでは角丸にCSS3が使用されており、スクリプトはjQueryをベースに下記のスクリプトを記述しています。

JavaScript

$(function() {
	$('#activator').click(function(){
		$('#overlay').fadeIn('fast',function(){
			$('#box').animate({'top':'160px'},500);
		});
	});
	$('#boxclose').click(function(){
		$('#box').animate({'top':'-200px'},500,function(){
			$('#overlay').fadeOut('fast');
		});
	});
});

サイトでは画像やjQueryなどを含む一式となったファイルがダウンロードできます。