jQueryとCSSで作る紙をめくるような効果をだすスクリプト[js]

js0905151.jpg

sohtanaka.comより、jQueryとCSSで作る紙をめくるような効果をだすスクリプトの紹介です。

デモーページはこちらから

「めくる」効果をだす箇所のマークアップは下記のようになります。

HTML

<div id="pageflip">
	<a href="#">
		<img src="page_flip.png" alt="" />
		<span class="msg_block">Subscribe via RSS</span>
	</a>
</div>

さらにそのCSSが下記です。

CSS

#pageflip {
	position: relative;
}
#pageflip img {
	width: 50px; height: 52px;
	z-index: 99;
	position: absolute;
	right: 0; top: 0;
	-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
	width: 50px; height: 50px;
	position: absolute;
	right: 0; top: 0;
	background: url(subscribe.png) no-repeat right top;
	text-indent: -9999px;
}

その効果をだすアニメーションのスクリプトが下記です。

JavaScript

$("#pageflip").hover(function() { //On hover...
	$("#pageflip img , .msg_block").stop()
		.animate({
			width: '307px',
			height: '319px'
		}, 500);
	} , function() {
	$("#pageflip img").stop()
		.animate({
			width: '50px',
			height: '52px'
		}, 220);
	$(".msg_block").stop()
		.animate({
			width: '50px',
			height: '50px'
		}, 200);
});

jQueryが必要です。