2017年9月4日

デザイン

【JS】スクロールした時にCSSanimationを発動させる「scrollMonitor」

CSS アニメーション JavaScript scrollMonitor

はじめに

今回はスクロールした時にCSSアニメーションを発動させることができる、「scrollMonitor」をご紹介します。

例として、今回はこういったデモを作っていきます。
下のデモをスクロールして、動きを確かめてください。

See the Pen Scroll to Animate by Ayaka Sasaki (@ayausaspirit) on CodePen.

スクロールをしたら、画像が左から右にスライドして入ってくる、という一般的なものです。

では、さっそくはじめていきましょう！
次のセクションではscrollMonitorでできることを詳しくご紹介していきます。
すぐにデモの解説を見たい方は、こちらからどうぞ。

scrollMonitorとは？

scrollMonitorとはビューポート（デバイスの表示領域）に要素が入ったり出たりした時にイベントを受け取ることができるAPIです。watcherオブジェクトという要素を監視するオブジェクトを使い、イベントを発動しています。watcherオブジェクトは監視している要素のvisibility、ビューポートからの相対的な位置など様々な情報を取得することができます。また、スクロールコンテナーが<body>以外の要素であれば（<div>などにoverflow: scroll;などを設定している場合）、スクロールコンテナーに新しくwatcherオブジェクトを作成し、そのスクロールコンテナー内での監視役を設けることができます。

scrollMonitorの特徴はそのスピードです。
スクロールイベントが発生するごとに、DOMを２回のみ取得します(ドキュメントの高さとビューポートの一番上の位置を取得)。
また、変数、オブジェクト、配列、ストリングなども定義していないので、非常に早く動きます。

scrollMonitorはvanilla Javascriptで書かれています。
スクリプトはヘッドタグ内に入れると動かないので、注意してください。

基本的な使い方

bodyタグがスクロールした時の監視

var scrollMonitor = require("./scrollMonitor");
var myElement = document.getElementById("itemToWatch"); //監視する要素を作成

var elementWatcher = scrollMonitor.create( myElement );

elementWatcher.enterViewport(function() {
    console.log( '表示領域に入りました' );
});
elementWatcher.exitViewport(function() {
    console.log( '表示領域から出ました' );
});

スクロールコンテナーがスクロールした時の監視

var containerElement = document.getElementById("container");

var containerMonitor = scrollMonitor.createContainer(containerElement);　//スクロールコンテナーを定義

var childElement = document.getElementById("child-of-container");
var elementWatcher = containerMonitor.create(childElement);

elementWatcher.enterViewport(function() {
    console.log( '表示領域に入りました' );
});
elementWatcher.exitViewport(function() {
    console.log( '表示領域から出ました' );
});

scrollMonitorのデモ

scrollMonitor公式のデモを紹介します。
興味がある方はぜひご覧ください。

デモ１
 デモ２
 デモ3
デモ4
デモ5
デモ6

Watcher オブジェクト

watcherオブジェクトは scrollMonitor.screate( watchItem ) で作成することができます。
また、任意で２つ目の値を渡すことができます。２つ目の値はビューポートに入る前、もしくは入った後にイベントを発動させるものです。詳しくはoffsetの項目でご紹介します。

watchItem は以下のものでないと動きません：
– DOM 要素 – DOM要素が内包する範囲を監視する
– オブジェクト – obj.top と obj.bottom が watcher.top と watcher.bottom として認識されます
– 数字 – 数字の数だけ上から数えた1pxのエリアを監視します。マイナスの数字の場合は、下から数えます
– jQuery のオブジェクト – 最初のDOM要素を監視します
– NodeList / 配列 – 最初のDOM要素を監視します
– 文字列 – 文字列をCSSのセレクタとして認識し、最初に合致するものを監視します

ドキュメントの高さが変わった場合、高さが変わった後の最初のスクロールイベントが発生した時にwatcherオブジェクトが再計算を行います。

イベント

watcherオブジェクトは6つのイベントを発動することができます。
– visibilityChange – 要素が表示領域に入るか出るか
– stateChange – visibilityChange に似ているが、１スクロールで要素が表示領域の下から上に移動した際や、要素が少し見える状態から完全に見える状になった際にも発動する
– enterViewport – 要素が表示領域に入った時に発動
– fullyEnterViewport – 要素が完全に表示領域に入った時に発動 ※1
– exitViewport – 要素が表示領域から完全にでた時に発動
– partiallyExitViewport – 要素が表示領域から少しでも出た時に発動 ※2

※1 要素が表示領域よりも大きい場合、fullyEnterViewportは要素が表示領域全体に広がった時に発動する
※2 要素が表示領域よりも大きい場合、partiallyExitViewportは要素が表示領域全体に広がらなくなった際に発動する

プロパティ

elementWatcher.isInViewport – 要素が表示領域の中にあればtrue
elementWatcher.isFullyInViewport – 要素全体が表示領域の中にあればtrue ※1
enterWatcher.isAboveViewport – 要素が表示領域の上にあればtrue
elementWatcher.isBelowViewport – 要素が表示領域の下にあればtrue
elementWatcher.top – ドキュメントのトップから要素のトップまでの距離
elementWatcher.bottom – ドキュメントのトップから要素のボトムまでの距離
elementWatcher.height – 要素のトップからボトムまでの距離
elementWatcher.watchItem – 監視している要素、数字もしくはオブジェクト
elementWatcher.offsets – 監視のオフセットを取得

※1 要素が表示領域よりも大きい場合、要素が表示領域全体に広がった時にtrue

メソッド

elementWatcher.on/off/one – 一般的なもの
elementWatcher.recalculateLocation – ドキュメントに対しての要素の位置を再計算する
enterWatcher.destroy – watcherオブジェクトとそれに関するイベントリスナーなどを削除する
elementWatcher.lock – watcherオブジェクトを現在の位置で固定する
elementWatcher.unlock – watcherオブジェクトの固定を解除する

オフセット

イベントを表示領域の近くで発動させたい場合は、オフセットを使うことができます。
オフセットはscrollMonitor.createに渡す2つ目の値です。

こちらのコードは表示領域に後200px近づいた時に発動します。

scrollMonitor.create( element, 200 )

こちらのコードは表示領域の中に200px入った時に発動します。

scrollMonitor.create( element, -200 )

トップとボトムでオフセットを変えたい場合はこのように定義できます。

scrollMonitor.create( element, {top: 200, bottom: 50})

トップだけオフセットを加えたい場合はこのように定義できます。

scrollMonitor.create( element, {top: 200})

以上、scrollMonitorでできることのご紹介でした。

詳しくは公式のgithubリポジトリでもご覧いただけます。

scrollMonitor

デモコードの解説

それでは、デモコードの解説をしていきます。

See the Pen Scroll to Animate by Ayaka Sasaki (@ayausaspirit) on CodePen.

ステップとしては、大きく３ステップです。
1. まずはHTMLを用意する
2. 発動させたいCSSアニメーションを用意しておく
3. scrollMonitorを使い、イベントを発動させる

まずはHTMLを用意する

まずは、HTMLですがコードをシンプルにするために必要なところだけを抜粋します。

<article class="main">
    <h1>サンプルアニメーション</h1>
    <h2>ここではscrollMonitorを使ったスクロールした時のアニメーションを実装します。</h2>
    <p>ここではscrollMonitorを使ったスクロールした時のアニメーションを実装します。</p>
    <img src="https://res.cloudinary.com/bagelee/image/upload/v1503388518/1_u1o360.png" class="animation1">
    <p>ここではscrollMonitorを使ったスクロールした時のアニメーションを実装します。</p>
    <img src="https://res.cloudinary.com/bagelee/image/upload/v1500620692/4_qdljaw.png" class="animation2">
    <p>ここではscrollMonitorを使ったスクロールした時のアニメーションを実装します。</p>
    <img src="https://res.cloudinary.com/bagelee/image/upload/v1500620692/a_qcbyjk.png" class="animation3">
    <p>ここではscrollMonitorを使ったスクロールした時のアニメーションを実装します。</p>
    <img src="https://res.cloudinary.com/bagelee/image/upload/v1500620692/6_gtljn2.png" class="animation4">
</article>

少し長くなってしまいましたが、重要なこととしては１つしかありません。

アニメーションをつけたい要素にユニークなクラスをつけてください。

今回のサンプルコードの場合は、全ての画像に animation1, animation2, animation3, animation4 と連番でクラスをふっています。

次に発動させたいCSSアニメーションを用意しておく

次にイベントが発動した際のCSSアニメーションを用意します。

今回の場合は、画像が左から右へスライドしてくれるアニメーションを用意します。

まずは、アニメーションを発動する際に追加するクラス名を作ります。
今回の場合は、animateというクラス名を追加することにします。

.animate{
    animation: animation1 0.8s ease;
}

こちらは animation プロパティでどのアニメーションをどれくらいかけて、どれくらいのスピード感で発動させるかを定義しています。
まだ、アニメーションの中身自体は定義していません。
今回は、animation1というアニメーションを 0.8秒間かけて、easeすると定義しています。
３つ目の値 (ease) に関しては、こちらの記事に詳しく書いてありますので、参考にしてください。
サンプルでわかるtransition-timing-function変化の違い

こちらが定義できたら、次にanimation1 のアニメーションの中身を定義していきます。

.animate{
    animation: animation1 0.8s ease;
}
@keyframes animation1{
    0%{
        position: relative;
        left: -800px;
    }
    100%{
        position: relative;
        left: 0;
    }
}

今回は、animation1 という名前のアニメーションなので、 @keyframes animation1{}の中にアニメーションを定義していきます。
また、左からスライドする動きは始まりと終わりだけ定義すれば、途中の部分はアニメーションで埋めてくれるので 0% と 100% の部分だけ定義します。

これで、イベントが発動したら、要素に animate クラスを追加することで、シュッと左から入ってくるアニメーションが作れます。

scrollMonitorを使い、イベントを発動させる

最後にscrollMonitorを使って、イベントを発動させます。
まずは、jQueryとscrollMonitor.jsを読み込んでおきます。

それができたら、それぞれアニメーションを追加したい要素をwatcherオブジェクトとして設定します。

var animation1 = $( ".animation1" );
var animation2 = $( ".animation2" );
var animation3 = $( ".animation3" );
var animation4 = $( ".animation4" );

var elementWatcher = scrollMonitor.create( animation1 );
elementWatcher.enterViewport(function() {
    console.log('aaa');
    animation1.addClass( "animate" );
});
var elementWatcher = scrollMonitor.create( animation2 );
elementWatcher.enterViewport(function() {
    console.log('aaa');
    animation2.addClass( "animate" );
});
var elementWatcher = scrollMonitor.create( animation3 );
elementWatcher.enterViewport(function() {
    console.log('aaa');
    animation3.addClass( "animate" );
});
var elementWatcher = scrollMonitor.create( animation4 );
elementWatcher.enterViewport(function() {
    console.log('aaa');
    animation4.addClass( "animate" );
});

今回の場合は、全て enterViewport で（表示領域に要素が入ったら）イベントが発動するようにしましたが、 fullyEnterViewportにしてもOKですし、オフセットで細かいタイミングを測ることもできます。