Animation

『AnimateScroll』

Animation

こちらからデモやサンプルをダウンロードすることが出来ます。

使い方

header内に、jQuery本体とanimatescroll.jsを読み込みます。

あとは、html内で

と書けばOKです。

トップへ戻るを作成したい場合は、

こんな感じになります。

オプション

オプションは以下のとおり3つ。

  • easing・・エフェクト効果
  • scrollSpeed・・スクロールスピード
  • padding・・微調整

easingについては、Easing Function 早見表というものがありますので、こちらで確認することができます。

Animation1

『AnimateScroll』のサイト内では、

Animation2
  • easeInOutBack
  • easeOutBounce
  • easeOutElastic

のデモをみることができます。

実際に、デモをみてみましたが、easeOutBounceなんかはとても面白いと思いました。

結構いろいろなところで使えそうな『AnimateScroll』のご紹介でした。

ADVERTISEMENT

Author:

follow FacebookPage

当ブログがお気に召しましたら是非いいね!をお願いします!

Follow Me

閲覧頂きありがとうございました:)

Message

トップへ戻る