2014/01/28

【JavaScript】img要素をアニメーションでスクロールさせる方法

高さのあるimg要素をアニメーションでスクロールさせる方法

Webページを作成中,サンプル画像を表示させるにあたって,
「全体を表示させたいけどデザインが崩れるので,スクロールして全部見られるようにして欲しい」
と要望を受けたので,その際に作ったソースコードを紹介したいと思います.

目次

画像周りのCSS

スクロールさせたい画像周りのCSSです.表示領域を240px×230pxに設定し,
overflow: hiddenをかけることで,表示領域からはみ出した部分を非表示にします.

#SampleSlide {
  background: none;
  border: 2px solid #333;
  height: 230px;
  width: 240px;
  overflow: hidden;
}

以下のように表示されます.
これにJavaScriptを使ってアニメーション動作を付与し,スクロール動作をさせていきます.

JavaScriptでアニメーション

画像の下の部分を表示させるために,画像のmargin-topにマイナスの値を設定します.

設定に必要な値は,取得した画像の高さと表示領域の高さの差を取ることで求められます.

マウスオーバーした際にスクロールし,マウスアウトした際に初期位置に戻るアルゴリズムは以下のようになります.

$("#SampleSlide").hover(function() {
	if ($(this).find("img")[0]) {
	    var imgHeight = $(this).find("img")[0].offsetHeight;
	    var moveLength = 230 - imgHeight;
	    $($(this).find("img")[0]).stop(true, false).animate({
		  marginTop : moveLength
	    }, {
		  duration : 3000,
		  queue : false
	    });
	}
}, function() {
  $($(this).find("img")[0]).stop(true, false).animate({
	  marginTop : 0
  }, {
	  duration : 0,
	  queue : false
  });
});

JavaScriptを適用したサンプルは以下のようになります.

まとめ

「画像全体を表示させたいけれど,デザインは崩したくない!」といった場合に是非使ってみてください.

動作にかかる時間やスライドの動作などを変更してみてもいいかもしれませんね.

※ご使用になる場合は,表示領域の大きさやID名等を適宜変更してご使用ください.