scrollama.js

JavaScript

スクロールイベントを実装できるモダンで軽量なJSライブラリ「scrollama.js」

scrollama.jsは、スクロールイベントを実装することができるモダンで軽量なJavaScriptライブラリです。IntersectionObserverを使用しているとのこと。スクロールされた位置によって要素のカラーを変更したりなんてことができます。

scrollama.js

デモ

デモページでは中央に赤い点線が引かれていて、ここがトリガーとなっています。スクロールした時に要素がこの位置を通過してから通りすぎるまでの間、要素のカラーが変化します。

スクロールにより、特定の位置をトリガーとして要素に何かしらの変化を施したい場合に便利ですね。応用次第でさまざまなシーンに役立つ機能といえるのではないしょうか?

オプションには、step、container、graphic、offset、progress、debugがあります。デフォルト値は、offsetが0.5、progressがfalse、debugがfalseです。

また、上記はscrollama.setupに対するオプションですが、ほかにもscrollama.onStepEnter、scrollama.onStepExit、scrollama.onStepProgress、scrollama.onContainerEnter、scrollama.onContainerExitといったコールバックなどのセッティングもできます。

scrollama.js

関連記事

  1. jQueryを使わないコード集

    JavaScript

    jQueryを使わないでコードを書くTips集

    jQueryを使えば簡単にできることがたくさんあるんですが、ちょっとし…

  2. Ladda

    JavaScript

    ボタンとローディングアイコンが一緒になったUIを実装できるjQueryプラグイン「Ladda」

    Laddaはボタンとローディングアイコンが一緒になったUIを実装するこ…

  3. JavaScript

    ナビゲーションをレスポンシブデザインにしてくれるjQueryプラグイン「HorizontalNav」…

    覚えておくと便利そうだったのでメモがてらエントリーします。リスト化した…

  4. PreViewTube.js
  5. no-image

    JavaScript

    スワイプでのスライドもできるシンプルなスライダー「jquery-slide」

    jquery-slideはスワイプでのスライドにも対応したシンプルなス…

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP