scroll-driven animations - マーカーをアニメーション表示にする

scroll-driven animations で表示する

Intersection Observer API の JavaScript の部分について、分かり易く補足説明を加えたい。scroll-driven animations を利用して補足説明にマーカーが入るように強調（ハイライト表示）をアニメーションしてみる。

マーカーの表示に於いて、どの辺りまでスクロールさせてページのどの部分でハイライトのアニメーションを発火させるか？そのタイミングの調整も併せてレスポンシブでの検証を実行する。

const onPageLoad = () => {

自動的に処理を実行したい場合などに使用する onload イベント。この場合、ページの読み込みが完了した時点でイベントを実行するというもの。

const onPageLoad = () => {

03 - 04

const persons = document.querySelectorAll( '.person' ); const names = document.querySelectorAll( '.name' );

は、指定したセレクターに一致する、文書内のすべての要素のリストを返す。

監視対象とする要素は、アイテム要素自身(.person)と絶対位置を指定しているテキスト(.name)の2種類である。

このメソッドは、Document Object Model (DOM) 内の要素のグループを選択するために使用される。

const persons = document.querySelectorAll( '.person' );

"myBox" 要素の中にあるすべての <p> 要素を取得するには、次のようにします。

const matches = myBox.querySelectorAll("p");

次の例では、文書内にあるすべての <div> 要素のうち、 "note" または "alert" のいずれかのクラスを持つもののリストを返す。

const matches = myBox.querySelectorAll("div.note, div.alert");

ここでは、文書の <p> 要素のうち、直接の親要素が <div> の "highlighted" クラスのものであり、それが ID が "test" であるコンテナーの中にあるものの一覧を取得する。

const container = document.querySelector("#test");
const matches = container.querySelectorAll("div.highlighted > p");

次の例では属性セレクターを使用して、文書内の <iframe> 要素のうち "data-src" という名前の属性を持つもののリストを返す。

const matches = document.querySelectorAll("iframe[data-src]");

const observeAction = ( entries ) => { }

は、交差オブザーバー API で使用されるものだ。

forEach は、配列のデータを繰り返し処理するメソッドである。

08 - 09

if ( entry.isIntersecting ) { entry.target.classList.add( 'is-visible' ); } else { entry.target.classList.remove( 'is-visible' );

は、要素がビューポートに表示されているかどうかを判断するコールバック関数である。

entry.isIntersecting が true の場合、entry.target.classList.add( 'is-visible' );が実行され、指定した CSS クラスが追加されてスタイルが変更される。entry.isIntersecting が false の場合、entry.target.classList.remove( 'is-visible' ); が実行され、クラスが削除される。

rootMargin:"-50% 0px -30% 0px"

は、rootMargin が指定されていない場合、既定では文字列 "0px 0px 0px 0px" (上、右、下、左)となる。

15 - 30

options

は、交差オブザーバー API で使用されるものだ。

const obsever = new IntersectionObserver( observeAction, options );

は、Intersection Observer のインスタンスを生成する。

obsever.observe( target );

は、指定した要素(target)について監視を開始する。

29 - 30

startObserve( persons, optionsPersons );startObserve( names, optionsNames );

画像の交差監視を指示する。キストの交差監視を指示する。