ScrollTween.jsを使ってマウスのスクロールでアニメーションさせる方法｜DAD UNION

本記事では、ScrollTween.jsを利用して、特定のエリア内でマウスホイールのスクロール量に応じてアニメーションを表示させる方法をご紹介します。
この記事を読むことで、初心者の方でも簡単にスクロールアニメーションを実装できるようになります。

Contents

スクロールアニメーションの仕組み
マウスのスクロールでアニメーションさせるCSSの記述例
ScrollTween.jsを使ってマウスのスクロールでアニメーションさせるJavaScriptの記述
マウスのスクロールでアニメーションさせるHTMLの記述
ScrollTween.jsを使ってマウスホイールのスクロールでアニメーションするデモページ
参考サイト：パララックスというか、スクロールでアニメーションさせるjQueryプラグイン「ScrollTween.js」
まとめ

スクロールアニメーションの仕組み

ScrollTween.jsは、マウスホイールのスクロール動作に応じて特定のエレメントに対してアニメーションを適用するためのライブラリです。これを使うことで、スクロールによる動きに応じて要素を移動させたり、サイズを変更したりすることができます。

マウスのスクロールでアニメーションさせるCSSの記述例

以下は、アニメーションさせる要素（#anime1、#anime2）とマウススクロールエリア（#container）のCSS例です。必要に応じて変更してください。

<style>
body{
	font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
	padding: 0;
	margin: 0;
}
h1{
	font-size:18px;
	line-height:1.6em;
	text-align:center;
	font-weight:normal;
	padding:10px 0;
}
.clWrap{
	width:700px;
	margin:0 auto;
	text-align:left;
}
#container{
	width:700px;
	height:500px;
	padding:0;
	margin:0 auto;
	border:solid 1px #CCCCCC;
}
#container *{
	padding:0;
	margin:0;
}
#anime1{
	width:180px;
	height:70px;
	border:solid 3px #000000;
	text-align:center;
	line-height:70px;
}
#anime2{
	width:200px;
	height:70px;
	background-color:#000;
	color:#FFF;
	text-align:center;
	line-height:70px;
}
</style>

ScrollTween.jsを使ってマウスのスクロールでアニメーションさせるJavaScriptの記述

次に、ScrollTween.jsを使ってアニメーションを実装するためのJavaScriptコードを紹介します。このコードはjQueryとScrollTween.jsを利用しています。

jquery-1.8.1.min.js、jquery.mousewheel.js、ScrollTween.jsファイルを読み込みます。マウススクロールエリアScrollTween.container(マウススクロールエリア)に対して、ScrollTween.container(マウススクロールエリア).add(アニメーションオプション)を設定します。

<script type="text/javascript" src="jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="ScrollTween.js"></script>
<script type="text/javascript">
$(function() {
	var containerDiv = $('#container');
	var container = ScrollTween.container(containerDiv);
	container.add("#anime1", function(tween) {
		tween
		.to(0, tween.styles().topOut().center())
		.range(100, 200, tween.styles().middle())
		.to(400, tween.styles().rightOut());
    
	});
	container.add("#anime2", function(tween) {
		tween
		.to(200, tween.styles().bottomOut().center())
		.range(300, 400, tween.styles().middle())
		.to(500, tween.styles().leftOut());
	});
	container.play();
});
</script>

マウスのスクロールでアニメーションさせるHTMLの記述

以下は、スクロールアニメーションを適用するためのHTMLコードです。マウススクロールエリア（id=”container”）内にアニメーションさせる要素（id=”anime1″、id=”anime2″）を配置しています。

<div class="clWrap">
    <h1>下の枠内にてマウスホイールにてスクロールして見て下さい。<br />スクロール量により指定の枠が移動します。</h1>

        <div id="container">
            <div id="anime1">上→下→右に動きます</div>
            <div id="anime2">下→上→左に動きます。</div>
        </div>

</div><!--/clWrap-->