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

busy-loadシンプルでフレキシブルなローディングマスクプラグイン「busy-load」前のページ

手軽にパララックス効果を実装できるシンプル・軽量な「simpleParallax」次のページno-image

関連記事

  1. Filterable Product Grid
  2. LuminJS

    JavaScript

    テキストを徐々にハイライトしていく「LuminJS」

    LuminJSはWebページ上のテキストを徐々にハイライトしていくJa…

  3. JavaScript

    JavaScriptの関数のスコープについてちょっと確認してみる

    JavaScriptの関数のスコープを確認、整理する意味で記事にしてみ…

  4. Timeline

    JavaScript

    水平・垂直に対応したVanilla JSによるタイムライン実装「Timeline」

    Timelineは水平・垂直に対応したVanilla JSを使ったタイ…

  5. Points Of Interest

    JavaScript

    各ポイントごとにクリックで詳細文を表示させるjQuery「Points Of Interest」

    Points Of Interestはサイト内に設置した各ポイントを…

  6. Create a month picker jQuery plugin

最近の記事

  1. クッキー&クリーム ポップコーン
  2. マウイチップス マウイオニオン味
  3. グリーンビーントゥーバー
  4. VS-543AS

アーカイブ

PAGE TOP