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」