スクロールのイベントをIntersectionObserverで快適に実装する最新の軽量JavaScriptライブラリ -Scrollama

Intersection Observerを利用したWebページが増えてきました。
IntersectionObserversは、ターゲット要素がブラウザのビューポートと呼ばれるページの表示領域と重なる(または交差する「Intersection」)量を計算するもので、主要なブラウザに実装されています。

どんなことができるかというと、コンテンツのスクロールに応じてサイドバーをぴたっと配置したり、ヘルプや広告を表示したり、まだ表示されていないコンテンツや画像を先読みさせたりできます。これらを実装するには面倒なJavaScriptが必要でしたが、今では非常に簡単に実装できます。

IntersectionObserverを使用して、スクロールに応じたさまざまなイベントを実装する最新の軽量JavaScriptライブラリを紹介します。

デモのキャプチャデモのアニメーション

Scrollama -GitHub

Intersection Observerについては、以前の記事を参考にしてください。

Scrollamaの特徴

Scrollamaはvanilla JSで、jQueryやD3のような依存関係はありません。スクロールイベントのためにIntersectionObserverを使用し、スクロールエフェクトを実装する最新の軽量JavaScriptライブラリです。

  • ステップをトリガーにする
    スクロールした表示された要素をステップとし、そのステップをトリガーにイベントを発生させます。
  • 進捗をトリガーにする
    スクロールして表示された要素の表示率0%から100%まで、イベントを細かく発生させることができます。
  • スティッキー グラフィック
    スティッキーなグラフィックパターンをスクロールさせる便利な機能。

Scrollamaのデモ

デモでは縦長ページのスクロールエフェクトで利用できるScrollamaの基本テクニックが掲載されています。

デモのキャプチャ

Basic

Scrollamaの基本的な動作が分かるデモで、要素がラインを超えたステップをトリガーにしています。

デモのキャプチャ

Progress

要素が通過する0-100%の完了まで、イベントを細かく発生させることができます。

デモのキャプチャ

Sticky Graphic v1 (CSS, position sticky)

CSSを使い、要素の中心にトリガーを設定し、スクロールしてもposition stickyでぴたっと配置しています。

デモのキャプチャ

Sticky Graphic v2 (CSS, position fixed)

CSSを使い、要素の中心にトリガーを設定し、スクロールしてもposition fixedでぴたっと配置しています。

Scrollamaの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

Step 2: HTML

親コンテナ#scrollに、グラフィックコンテナ.scroll__graphicとテキストコンテナ.scroll__textを配置した2カラムのレイアウトです。

Step 3: CSS

親コンテナ#scrollには、「position: relative;」を指定します。
グラフィックコンテナ.scroll__graphicは絶対配置されているため、親コンテナの最上部に表示されます。高さはJavaScriptでビューポートの100%に設定されます。3Dトランスフォームを追加することで、固定位置から絶対位置に移動するときにジャンプジングジャンプを減らすことができます。グラフィックコンテナ内には任意のものを配置することができます。
テキストコンテナ.scroll__textと.stepに必要なCSSはありません。

Step 4: JavaScript

コンテナやステップなどを指定し、スクリプトを実行します。

top of page

©2017 coliss