Stunning Sliding Door Effect


Description: マウスオーバーで四方に画像が分かれ、別のコンテンツが表示される、というもの。マウスを離すと自動で戻りますが、その時のアニメーションエフェクトにも工夫されています。jquery.easingを使います。
Sample: demo
Tutorial: Create a Stunning Sliding Door Effect with jQuery
License: -

Sample

Test 1

1です

ここに1のコンテンツを表示させます

Test 1

2です

ここに2のコンテンツを表示させます

Test 1

3です

ここに3のコンテンツを表示させます

Test 1

4です

ここに4のコンテンツを表示させます

Test 1

5です

ここに5のコンテンツを表示させます

Test 1

6です

ここに6のコンテンツを表示させます

Test 1

7です

ここに7のコンテンツを表示させます

Test 1

8です

ここに8のコンテンツを表示させます

<

Test 1

9です

ここに9のコンテンツを表示させます


Note

jQueryとeasingのパスを書いて以下でセッティングして実装。

$(document).ready(function() {

	//Custom settings
	var style_in = 'easeOutBounce';
	var style_out = 'jswing';
	var speed_in = 1000;
	var speed_out = 300;	

	//Calculation for corners
	var neg = Math.round($('.qitem').width() / 2) * (-1);
	var pos = neg * (-1);
	var out = pos * 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:pos});
		$(this).find('div.topRight').css({top:0, left:pos, width:pos , height:pos});
		$(this).find('div.bottomLeft').css({bottom:0, left:0, width:pos , height:pos});
		$(this).find('div.bottomRight').css({bottom:0, left:pos, width:pos , height:pos});	

	}).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');
	});

});

軽量ですね。

Related snippet :

  • Description: タブメニューにマウスを乗せるだけでコンテンツを切り替えます。IE6だけ表示が崩れるので対策が必要です。使い勝手はとても良いのでうまく使っていきたいで ...
  • Description: サムネイルに応じて画像がスライドします。ナビゲーションも一緒にスライドするのは印象的でいいですね。動作も軽快で汎用性がありそうです。コードも軽量でc ...
  • Description: 簡単なコードで出来るギャラリー。ナビゲーションとサムネイルも付いています。IE6,7はcssを調整しないとうまく表示できませんが、スクリプト自体は動 ...
  • Description: Macライクなドックメニューを実装するプラグインです。爽快なアニメーションがかわいいですね。アイコンにはキャプションも表示してくれます。クロスブラウ ...
  • Description: シンプルにアニメーションするメニュー。簡単なコードで実装することが出来ます。クロスブラウザにも対応しており、ちょっとしたインパクトも与えることができ ...
  • Description: その場でカルーセルを実装するプラグインです。クリックで回転します。表示はcssの調整が必要ですが、IE6でも7でも動くクロスブラウザ対応です。プロダ ...
  • Description: 省スペースで多くのコンテンツを見ることが出来るコンパクトニュースビューアを実装出来るプラグインです。css3を利用しているのでデモと同じように実装す ...