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

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

1．CSSの記述例

以下は任意です。

<style>
.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>

2．読込むJsファイルとJavaScriptの記述例

<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>

3．HTMLの記述例

<div class="clWrap">


<div id="container">

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


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

</div>


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

ScrollTween.jsを使ってマウスホイールのスクロールでアニメーションするデモ

参考サイト：パララックスというか、スクロールでアニメーションさせるjQueryプラグイン「ScrollTween.js」