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

Post on:2017年11月24日

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: 外部ファイル

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

<body>
  ...
  コンテンツ
  ...
<script src='../scrollama.js'></script>
</body>

<body>

...

コンテンツ

...

</body>

Step 2: HTML

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

<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>

</div>

</div>

</div>

</div>

</div>

</section>

Step 3: CSS

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

#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;
}

#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

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

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);
}