通常、ブラウザ上でwebサイトをマウスホイールでスクロールをするとホイールを止めた時にピタッと止まりますが、止まるときに余韻が残ったりするほうが少しリッチな感じがすると思います。jQueryで動作する方法があるので、覚え書き。
プラグインのダウンロード
jqueryのダウンロード・読み込みは基本ですが、その他の必要なプラグインを下記からダウンロードします。
→jquery.mousewheel.js
→jquery.easie.js
そして、下記のようにJavascriptの記述をします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.mousewheel.js"></script> <script type="text/javascript" src="jquery.easie.js"></script> <script type="text/javascript"> $(function() { var scrolly = 0; var speed = 400; $('html').mousewheel(function(event, mov) { if(jQuery.browser.webkit){ if (mov > 0) scrolly = $('body').scrollTop() - speed; else if (mov < 0) scrolly = $('body').scrollTop() + speed; } else { if (mov > 0) scrolly = $('html').scrollTop() - speed; else if (mov < 0) scrolly = $('html').scrollTop() + speed; } $('html,body') .stop() .animate({scrollTop: scrolly}, 'slow',$.easie(0,0,0,1)); //イージングプラグイン使わない場合 //.animate({ scrollTop: scrolly }, 'normal'); return false; }); }); </script> |
「var speed = 400;」の数字を変更すると、速度を変更できます。とっても簡単なので、是非試してみてください。
13.09.14 | WEBデザイン制作・IT関連