スクロールのイベントをIntersectionObserverで快適に実装する最新の軽量JavaScriptライブラリ -Scrollama
Post on:2017年11月24日
sponsors
Intersection Observerを利用したWebページが増えてきました。
IntersectionObserversは、ターゲット要素がブラウザのビューポートと呼ばれるページの表示領域と重なる（または交差する「Intersection」）量を計算するもので、主要なブラウザに実装されています。
どんなことができるかというと、コンテンツのスクロールに応じてサイドバーをぴたっと配置したり、ヘルプや広告を表示したり、まだ表示されていないコンテンツや画像を先読みさせたりできます。これらを実装するには面倒なJavaScriptが必要でしたが、今では非常に簡単に実装できます。
IntersectionObserverを使用して、スクロールに応じたさまざまなイベントを実装する最新の軽量JavaScriptライブラリを紹介します。
Intersection Observerについては、以前の記事を参考にしてください。
Scrollamaの特徴
Scrollamaはvanilla JSで、jQueryやD3のような依存関係はありません。スクロールイベントのためにIntersectionObserverを使用し、スクロールエフェクトを実装する最新の軽量JavaScriptライブラリです。
-
- ステップをトリガーにする
- スクロールした表示された要素をステップとし、そのステップをトリガーにイベントを発生させます。
-
- 進捗をトリガーにする
- スクロールして表示された要素の表示率0%から100%まで、イベントを細かく発生させることができます。
-
- スティッキー グラフィック
- スティッキーなグラフィックパターンをスクロールさせる便利な機能。
Scrollamaのデモ
デモでは縦長ページのスクロールエフェクトで利用できるScrollamaの基本テクニックが掲載されています。
Scrollamaの基本的な動作が分かるデモで、要素がラインを超えたステップをトリガーにしています。
要素が通過する0-100%の完了まで、イベントを細かく発生させることができます。
Sticky Graphic v1 (CSS, position sticky)
CSSを使い、要素の中心にトリガーを設定し、スクロールしてもposition stickyでぴたっと配置しています。
Sticky Graphic v2 (CSS, position fixed)
CSSを使い、要素の中心にトリガーを設定し、スクロールしてもposition fixedでぴたっと配置しています。
Scrollamaの使い方
Step 1: 外部ファイル
当スクリプトを外部ファイルとして記述します。
|
1 2 3 4 5 6 |
<body> ... コンテンツ ... <script src='../scrollama.js'></script> </body> |
Step 2: HTML
親コンテナ#scrollに、グラフィックコンテナ.scroll__graphicとテキストコンテナ.scroll__textを配置した2カラムのレイアウトです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<section id='scroll'> <!-- graphic container --> <div class='scroll__graphic'> <!-- actual graphic/chart --> <div class='chart'> <p>0</p> </div> </div> <!-- step/text container --> <div class='scroll__text'> <div class='step' data-step='1'> <p>STEP 1</p> </div> <div class='step' data-step='2'> <p>STEP 2</p> </div> <div class='step' data-step='3'> <p>STEP 3</p> </div> <div class='step' data-step='4'> <p>STEP 4</p> </div> </div> </section> |
Step 3: CSS
親コンテナ#scrollには、「position: relative;」を指定します。
グラフィックコンテナ.scroll__graphicは絶対配置されているため、親コンテナの最上部に表示されます。高さはJavaScriptでビューポートの100％に設定されます。3Dトランスフォームを追加することで、固定位置から絶対位置に移動するときにジャンプジングジャンプを減らすことができます。グラフィックコンテナ内には任意のものを配置することができます。
テキストコンテナ.scroll__textと.stepに必要なCSSはありません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
#scroll { position: relative; } .scroll__graphic { position: absolute; top: 0; left: 0; bottom: auto; width: 100%; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .scroll__graphic.is-fixed { position: fixed; } .scroll__graphic.is-bottom { bottom: 0; top: auto; } |
Step 4: JavaScript
コンテナやステップなどを指定し、スクリプトを実行します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
function init() { // 1. call a resize on load to update width/height/position of elements handleResize(); // 2. setup the scrollama instance // 3. bind scrollama event handlers (this can be chained like below) scroller .setup({ container: '#scroll', // our outermost scrollytelling element graphic: '.scroll__graphic', // the graphic text: '.scroll__text', // the step container step: '.scroll__text .step', // the step elements offset: 0.5, // set the trigger to be 1/2 way down screen debug: true, // display the trigger offset for testing }) .onStepEnter(handleStepEnter) .onContainerEnter(handleContainerEnter) .onContainerExit(handleContainerExit); // setup resize event window.addEventListener('resize', handleResize); } |
sponsors
