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

ScrollTween.jsを使ってエリア内でマウスホイールのスクロール量によって、アニメーションを表示させる方法をご紹介します。

Contents

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

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

※マウススクロールエリア（#container）内にアニメーションさせる要素（#anime1、#anime2）を用意してます。必要に応じて変更して下さい。

<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の記述

※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の記述

※マウススクロールエリア（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-->