2017年9月4日

デザイン

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

目次

  1. はじめに
  2. scrollMonitorとは?
  3. デモコードの解説
  4. まとめ

はじめに

今回はスクロールした時に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を2回のみ取得します(ドキュメントの高さとビューポートの一番上の位置を取得)。
また、変数、オブジェクト、配列、ストリングなども定義していないので、非常に早く動きます。

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公式のデモを紹介します。
興味がある方はぜひご覧ください。

デモ1
デモ2
デモ3
デモ4
デモ5
デモ6

Watcher オブジェクト

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

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

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

イベント

watcherオブジェクトは6つのイベントを発動することができます。
visibilityChange – 要素が表示領域に入るか出るか
stateChangevisibilityChange に似ているが、1スクロールで要素が表示領域の下から上に移動した際や、要素が少し見える状態から完全に見える状になった際にも発動する
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.

ステップとしては、大きく3ステップです。
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>

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

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

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

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

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

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

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

.animate{
    animation: animation1 0.8s ease;
}

こちらは animation プロパティでどのアニメーションどれくらいかけてどれくらいのスピード感で発動させるかを定義しています。
まだ、アニメーションの中身自体は定義していません。
今回は、animation1というアニメーションを 0.8秒間かけて、easeすると定義しています。
3つ目の値 (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ですし、オフセットで細かいタイミングを測ることもできます。

まとめ

以上、今回はスクロールした時にCSSアニメーションを発動させる「scrollMonitor」と簡単なデモをご紹介しました。

scrollMonitorは他にも色々な使い方がありますが、今回はCSSアニメーションを発動するために使用してみました。

ぜひ皆さんも応用して、Web制作に役立ててください。

0

0

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

eishisでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

CONTACT PAGE TOP