簡単！jQueryでスクロールに応じた画像の回転を実装する方法 – How to rotate the image by scroll

この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは。今回のtipsは【jQueryでスクロールに応じた画像の回転を実装する方法】です。先日【HTML5とjQueryでRotate｜スクロールに応じて画像を回転させる方法 – How to rotate the image by scroll】という記事を書きましたのでその続編です。HTML5+Jqueryの組み合わせで回転を実装すると複数の画像ファイルを編集したり、パーティクルとの組み合わせ等上位のカスタマイズが可能ですが、画像の回転だけを実現するなら今回の方が簡単かつ安定しています。もしご興味あればお試しください。

対応ブラウザ

Chrome, Safari, Opera, IE9

HTML・CSS

HTMLの記述です。scrollAreaでスクロールする範囲を指定します。


<div id="scrollArea">
	<img src="images/rotate.png" id="tgt">
</div>

CSS

デモで使用しているCSSです。デモでは画像を縦横中央に配置している為、多めの記述になっています。【position:absolute;】で任意の場所に指定していただいても構いません。


#scrollArea{
	height:8000px;
}
#tgt{
	-moz-transform-origin:50%;
	-webkit-transform-origin:50%;
	position: fixed;
	left:50%;
	top:50%;
	margin: -610px 0 0 -610px;
	height: 1220px;
	width: 1220px
}

jQuery

jqueryのバージョンは1.6.2以降で動作確認がとれています。下記しました各変数の概要も合わせてご確認ください。また$(‘#tgt’)の部分で回転させる画像を指定しています。回転画像を増やす等、カスタマイズする場合にはこちらを変更してください。


<script src="js/jquery-1.X.X.min.js"></script>
<script type="text/javascript">
$(window).scroll(function(){
	var rnum = 3;
	var wT = $(window).height();
	var sT = $(this).scrollTop();
	var wH = $(‘#scrollArea’).height() – wT;
	var scR = (wH / 360)/rnum;
	var scRR = parseInt(sT / scR);
	$(‘#tgt’).css({ WebkitTransform:"rotate("+ scRR +"deg)"});
	$(‘#tgt’).css({ MozTransform:"rotate("+ scRR +"deg)"});
	$(‘#tgt’).css({ OTransform:"rotate("+ scRR +"deg)"});
	$(‘#tgt’).css({ msTransform:"rotate("+ scRR +"deg)"});
});
</script>

ローカル変数名	概要
rnum	画像の回転数、スクロールしきる間に何回転するかの指定です。
wT	ウィンドウの高さを取得しています。
sT	現在のスクロール量を取得しています。
wH	スクロール範囲（総スクロール量）を取得しています。
scR	スクロールに応じた角度を算出するのに使用します。
scRR	スクロールに応じた角度です。

以上になります。