no-image

JavaScript

シンプルで軽量なスクロールアニメーション実装「animateMePlz」

animateMePlzはシンプルで軽量なスクロールアニメーションを実装できるjQueryプラグインです。0.8KBと超軽量ながらもカスタマイズもできる仕様がうれしいですね。使い方も簡単なので手軽に実装できるはず。

animateMePlz

デモ

デモページでは下へスクロールしていくと、各セクションごとにセクションの背景の色が変化します。緑、青、オレンジ……など、スクロールしていくことでいろんな色に切り替わっていく様子がおもしろいですね。スクロールに合わせて、このように何かのアニメーションを加えたい場合にはピッタリのjQueryプラグインといえます。

また、オプションには、threshold、animationStyle、repeat、animationDelayといった項目が用意されています。各オプションのデフォルト値は、thresholdが20、animationStyleが’fadeIn’、repeatが’repeat’、animationDelayが’.25s’です。

ちなみにanimationStyleはanimate.cssを利用できるので、かなり豊富なアニメーションの種類の中から選べます。

animateMePlz

no-image水平スクロールができることを示唆してくれる「ScrollHint」前のページ

レスポンシブ対応のjQuery Lightbox & Popupプラグイン「Flashy」次のページno-image

関連記事

  1. Playful Little Tooltip Ideas
  2. BetterToggle

    JavaScript

    要素を拡大しながら表示させたり非表示にしたりできるjQueryプラグイン「BetterToggle」…

    面白いjQueryプラグインがあったのでご紹介します。指定した要素を拡…

  3. Square Menu
  4. curtains.js

    JavaScript

    カーテンがヒラヒラ動くようなテクスチャ面を実装できる「curtains.js」

    curtains.jsはカーテンがヒラヒラと波打つ動きのようなテクスチ…

  5. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのeachメソッドのお勉強

    今回はjQueryのeachメソッドを使ってみました。なんかとても便利…

  6. Amigo Sorter Plugin

    JavaScript

    タッチ対応で直感的に並べ替えできるjQueryプラグイン「Amigo Sorter Plugin」

    Amigo Sorter Pluginは、タッチ対応で直感的にリスト項…

最近の記事

  1. CAR-HLD12BK
  2. OWL-LPB6701LA
  3. cheero Power Mountain mini 30000mAh CHE-110

アーカイブ

PAGE TOP