『AnimateScroll』
こちらからデモやサンプルをダウンロードすることが出来ます。
使い方
header内に、jQuery本体とanimatescroll.jsを読み込みます。
|
1 2 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="animatescroll.js"> |
あとは、html内で
|
1 2 3 |
<div id="Demo1">デモ1<div> <!-- 中略 ---> <a onclick="$('#Demo1').animatescroll();">デモ1へ</a> |
と書けばOKです。
トップへ戻るを作成したい場合は、
|
1 |
<a href='#' onclick="$('body').animatescroll();" ><small>Go to Top</small></a> |
こんな感じになります。
オプション
オプションは以下のとおり3つ。
- easing・・エフェクト効果
- scrollSpeed・・スクロールスピード
- padding・・微調整
easingについては、Easing Function 早見表というものがありますので、こちらで確認することができます。
『AnimateScroll』のサイト内では、
- easeInOutBack
- easeOutBounce
- easeOutElastic
のデモをみることができます。
実際に、デモをみてみましたが、easeOutBounceなんかはとても面白いと思いました。
結構いろいろなところで使えそうな『AnimateScroll』のご紹介でした。
