ページ内スクロールにアニメ効果を「AnimateScroll」
当ページのリンクには広告が含まれています。
スポンサーリンク
ページ内スクロールにアニメ効果を実装するプラグイン「AnimateScroll」を紹介します。
jQueryプラグイン「AnimateScroll」
このプラグインを使えば、ページ内の特定の場所にさまざまなアニメ効果でスクロールすることができます。
- easing:アニメ効果
- scrollSpeed:アニメのスピード
- padding:スクロール先からのパディングを指定
スポンサーリンク
それではデモページをスクロールしてみてください。
デモのソース(HTML + jQuery)
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta name="description" content="AnimateScroll のデモでーす。"> <title>AnimateScroll - jQueryプラグイン</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="animatescroll.js"></script> <style> .box{ height: 1000px; } #demo1 { background-color: #eee; } #demo2 { background-color: #ddd; } #demo3 { background-color: #ccc; } </style> </head> <body> <div id="top" class="box"> <h1>AnimateScroll のデモでーす。</h1> <ul> <li><a href="#" onclick="$('#demo1').animatescroll({scrollSpeed:2000,easing:'easeInOutBack'});">easeInOutBack</a></li> <li><a href="#" onclick="$('#demo2').animatescroll({scrollSpeed:2000,easing:'easeOutBounce'});">easeOutBounce</a></li> <li><a href="#" onclick="$('#demo3').animatescroll({scrollSpeed:3000,easing:'easeOutElastic'});">easeOutElastic</a></li> </ul> </div> <div id="demo1" class="box"> <a href="#" onclick="$('#top').animatescroll();">トップへ戻る</a> </div> <div id="demo2" class="box"> <a href="#" onclick="$('#top').animatescroll();">トップへ戻る</a> </div> <div id="demo3" class="box"> <a href="#" onclick="$('#top').animatescroll();">トップへ戻る</a> </div> </body> </html>
スポンサーリンク