WebサイトでjQueryを使ってTwittelatorの画像表示のようなエフェクトを追加する方法


Caps

最近UIが一新され、新たなアプリケーションのインターフェイスを形にして切れた「Twittelator」。

そのインターフェースの中で自分が一番気になった画像表示のエフェクトをjQueryを使ってcdbk.net CREATIVESのshowcaseで形にしました。

使うのはjQuery.js(今回は1.4.2)とイージングのエフェクトを簡単に追加できるjQuery.easing.js(1.3)のみ。

エフェクトを施したい画像を<span class=”jumpin”></span>で囲みcssでdisplay:block,overflow:hiddenを指定。

JavaScriptはjQuery、easingを<head>内に追加したあとに下記を追記。

//初期表示設定
function jumpin_set(){
	$(".jumpin").each(function(){			//指定するクラス
		var img_w = $(this).width();		//デフォルトの画像幅取得
		var img_h = $(this).height();		//デフォルトの画像高取得
		$(this).attr({"data-h":img_h});		//デフォルトの画像高を属性として保存
		$(this).animate({opacity:0.5,"box-shadow":"0 0 2px #111",width:img_w,height:(img_h/4)},100); //画像の高さを縮小
	});
}

$(document).ready(function(){
	$(window).load(function(){
		setTimeout(function(){
		jumpin_set();
                }, 100);
	});
	$(".jumpin").hover(function(){//マウスオーバー時の動作
		var img_w = $(this).width();
		var img_h = $(this).height();
		var next_h = $(this).attr("data-h");
		if(next_h){
		$(this).animate({opacity:1,"box-shadow":"none",width:img_w,height:next_h},1000,"easeOutElastic");
		$("img",this).animate({height:img_h},100).animate({height:next_h},100);
		$(this).removeAttr("data-h");
		}
	});
	$(".jumpin").mouseout(function(){//マウスアウト時の動作
		var img_w = $(this).width();
		var img_h = $(this).height();
		$(this).attr({"data-h":img_h});
		$(this).animate({opacity:0.5,"box-shadow":"0 0 2px #111",width:img_w,height:(img_h/4)},1000,"easeOutElastic");
	});
});

サンプルスクリプト

上記でスクリプトやCSSがバッティングしていなければ動作すると思います。

コメントを残す

メールアドレスが公開されることはありません。