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

サイト構築 -JavaScript

Post on:2009年12月11日

sponsors

Photoshopの「生成塗りつぶし」を文字の加工に活用しよう！ 2024年4月26日金曜日 20時から21時30分

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

CSS and jQuery Tutorial: Overlay with Slide Out Box
demo

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

デフォルトの画面

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

JavaScript

<textarea name="code" class="html" cols="60" rows="5">
$(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');
		});
	});
});
</textarea>