四方に分割スライドする画像エフェクトSliding Door

マウスオーバーすると、４つに分割された画像が四隅に向かってスライドしていくという画像エフェクトスクリプト。

jQueryとプラグインeasingを使用しています。

四方にスライドする画像エフェクト
Create a Stunning Sliding Door Effect
with jQuery

下でダウンロードする実装サンプルを見てもらえばわかると思いますが、画像は小さめのものの方が相性がいいようです。画像サイズに合わせてエフェクト速度を調整する必要があります。

好みの見た目になるまでエフェクト速度を試行錯誤してみてください。

ダウンロード

以下のサイトでjQueryとeasing、それと実装見本をダウンロードできます。
Create a Stunning Sliding Door Effect – Queness
同梱されているjQueryは1.3.1.minですが、もちろん1.3.2.minでも使用可能です。

中に入っているjsフォルダをサーバーにアップロードしてください。

実装手順

<head>～</head>に以下を挿入。
画像URLやサイズ、エフェクト速度を変更して使用して下さい。

※1 正方形でも長方形でも対応できるように少々手を加えてあります。
※2 WordPressとの相性を整えるためにCSS及びXHTMLを修正しました。一般的な使用法でしたら、ダウンロードしたサンプルに倣った方が良いと思います。

<script type="text/javascript" src="http://サイトURL/js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="http://サイトURL/js/jquery.easing.1.3.js"></script>

<script type="text/javascript">
$(document).ready(function() {

	//Custom settings
	var style_in = 'easeOutBounce';
	var style_out = 'jswing';
	var speed_in = 1200; //クローズのエフェクト速度
	var speed_out = 300; //オープンのエフェクト速度

	//Calculation for corners
	var neg = Math.round($('.qitem').width() / 2) * (-1);
	var pos = neg * (-1);
	var out = pos * 2;

	var neg2 = Math.round($('.qitem').height() / 2) * (-1);
	var pos2 = neg2 * (-1);
	var out2 = pos2 * 2;

	$('.qitem').each(function () {

	url = $(this).find('a').attr('href');
	img = $(this).find('img').attr('src');
	alt = $(this).find('img').attr('img');

	$('img', this).remove();
	$(this).append('<div class="topLeft"></div><div class="topRight"></div><div class="bottomLeft"></div><div class="bottomRight"></div>');
	$(this).children('div').css('background-image','url('+ img + ')');

	$(this).find('div.topLeft').css({top:0, left:0, width:pos , height:pos2});
	$(this).find('div.topRight').css({top:0, left:pos, width:pos , height:pos2});
	$(this).find('div.bottomLeft').css({bottom:0, left:0, width:pos , height:pos2});
	$(this).find('div.bottomRight').css({bottom:0, left:pos, width:pos , height:pos2});

	}).hover(function () {

	$(this).find('div.topLeft').stop(false, true).animate({top:neg, left:neg}, {duration:speed_out, easing:style_out});
	$(this).find('div.topRight').stop(false, true).animate({top:neg, left:out}, {duration:speed_out, easing:style_out});
	$(this).find('div.bottomLeft').stop(false, true).animate({bottom:neg, left:neg}, {duration:speed_out, easing:style_out});
	$(this).find('div.bottomRight').stop(false, true).animate({bottom:neg, left:out}, {duration:speed_out, easing:style_out});

	},

	function () {

	$(this).find('div.topLeft').stop(false, true).animate({top:0, left:0}, {duration:speed_in, easing:style_in});
	$(this).find('div.topRight').stop(false, true).animate({top:0, left:pos}, {duration:speed_in, easing:style_in})
	$(this).find('div.bottomLeft').stop(false, true).animate({bottom:0, left:0}, {duration:speed_in, easing:style_in});
	$(this).find('div.bottomRight').stop(false, true).animate({bottom:0, left:pos}, {duration:speed_in, easing:style_in});

	}).click (function () {
	window.location = $(this).find('a').attr('href');
	});

});
</script>

<style type="text/css">
.qitem {
	width: 560px; /* 画像幅指定 */
	height: 350px; /* 画像高さ指定 */
	margin: 5px 0;
	 /* オープン時の背景画像を指定 */
	background: url('http://背景画像URL') no-repeat;

	/* required to hide the image after resized */
	overflow: hidden;

	/* for child absolute position */
	position: relative;

	/* display div in line */
	float: left;
	cursor: hand;
	cursor: pointer;
}
.qitem img {
	border: 0;
	/* allow javascript moves the img position*/
	position: absolute;
	z-index: 200;
}
.qitem p.caption {
	position: absolute;
	z-index: 0;
	display: block;
	font-size: 14px;
	color: #555555;
	padding: 5px 0;
	margin: 0;
	width: 560px; /* 画像幅と同じ */
	text-align: center;
}

/* Setting for corners */
.topLeft, .topRight, .bottomLeft, .bottomRight {
	position: absolute;
	background-repeat: no-repeat;
	float: left;
}
.topLeft {
	background-position: top left;
}
.topRight {
	background-position: top right;
}
.bottomLeft {
	background-position: bottom left;
}
.bottomRight {
	background-position: bottom right;
}
.clear {
	clear: both;
}
</style>

使用場所に以下を記述。

<div class="qitem">
	<a href="リンクURL"><img src="http://クローズ時の表示画像URL" alt="" title="" /></a>
	<p class="caption">
	オープン時に表示するコメント
	</span>
</div>

以上です。
それでは。がんばってください。

via（AjaxRain.com）

«

1件のコメント

  1. [...] 　 ここ（jQueryのアニメーション関連いろいろまとめ）やここ（画像ポップアウト・イメージギャラリー・スライドショー｜jQuery plugin｜Ajax｜PHP & JavaScript Room）も幅広くまとまっています。 　 ここ（四方に分割スライドする画像エフェクトSliding Door）は使いどころが難しいけど、一応メモ。 [...]

    ピンバック by jQueryを使った画像エフェクトのまとめのまとめ | Satake Studio Developer's Blog — 2010年4月22日 @ 11:23 AM

コメントは管理者の承認後に表示されます




Comment