今回はIntersection Observer APIを使用してのアニメーションの方法をご紹介します。
正直この記事を書いている私も今手探りの状態なので、完全に初心者の方向けの記事です。
一緒に勉強していきましょう。
Intersection Observer APIってなに？
まずIntersection Observer APIってなに？という方もいると思います。日本語交じりで言うと『交差オブザーバー』。
交差オブザーバー API – Web API | MDN
上記仕様書から抜粋すると
交差オブザーバー API (Intersection Observer API) は、ターゲットとなる要素が、祖先要素または文書の最上位のビューポートと交差する変化を非同期的に監視する方法を提供します。
ということが書いてあります。
要するにブラウザの表示領域内に対象要素が見えると、それを検知してアニメーション等するよといった感じです。
これといいところは、これまでの技術はスクロールありきでアニメーションを発動させることが多かったのですが、このIntersection Observer APIを使用するとスクロールしないで単純に要素が見えた時にアニメーションを発動してくれるところです。
このおかげで最近の多岐にわたるタブレットやスマートフォンのブラウザサイズなどにもスムーズに対応ができ、使い方によってはアニメーションの幅も広がります。
ひとまず書き方に慣れるために
ひとまず書き方に慣れるために、今回は単純にテキストが表示領域内に入ったらふわっと表示させるアニメーションを作ってみましょう。
サンプルはこちらです。（大きな画面はこちらから）
See the Pen
Intersection Observer API by kkdd (@kk8kk)
on CodePen.
書いてある通りにはなりますが、1つずつjsを解析していきます。
まずはアニメーションさせる要素を指定します。
ここではテキストについているclassを指定しています。
|
1 2 |
// アニメーションさせる要素を指定する const anmitems = document.querySelectorAll('.anmItem'); |
ここではオプションの指定をします。オプションの詳細についてはこちら。
それぞれの値を指定してください。
|
1 2 3 4 5 6 |
// オプションの指定 const options = { root: document.querySelector('#scrollArea'), rootMargin: '0px', threshold: 1.0 }; |
単純に実行の宣言をします。
|
1 2 |
// 実行 const observer = new IntersectionObserver(showElements); |
上部で指定した要素が見えたら発動させる、という宣言をします。
|
1 2 3 4 |
// 各 .anmItem に到達したら発動する。複数あるので forEach を使用。 anmitems.forEach(anmitem => { observer.observe(anmitem); }); |
あとは要素が見えた時にis-activeをつけてアニメーションさせるように指定をします。
else で分岐させることで戻った時にもアニメーションを再度実行することができます。
これはお好みで指定してください。
|
1 2 3 4 5 6 7 8 9 10 |
// 要素が表示されたら実行。elseを使うことで1回戻っても発動する。 function showElements (entries) { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add('is-active') } else { entry.target.classList.remove('is-active') } }) } |
というわけでこれで無事完成です。
DEMO
今回はだいぶ簡単なアニメーションのご紹介になりましたが、最初のとっかかりにでもなれば幸いです。
Intersection Observer APIを使いこなせれば今まで再現しづらかったアニメーションも実現できると思うので、自分の中でもうすこしいい感じのアニメーションができたらまた記事にしたいと思います。
