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」

ブラウザ自体のスクロール位置アニメーションする系も良くありますよね。
(パララックスっていうんでしたっけ?)