サイトの雰囲気を作るスクロールアニメーション。

ふわっとテキストや画像を表示することで柔らかく、スッと表示させることでスタイリッシュな雰囲気を作りだすなど、リッチなサイトを作り出すために使われてきました。

今まではこのスクロールアニメーションを作りにはjQueryを使って一手間かける必要がありましたが、今回紹介するJavaScriptのIntersectionObserverは効率よくアニメーションを実装するのに大変役に立ちます！

今回は概要のみお伝えします。

従来のjQuery(Javascript)を使ったスクロールアニメーションの実装方法

従来のスクロールアニメションではJavascriptのscrollイベントを利用していました。

scrollイベントの問題点は画面位置を取得する必要があり、ユーザーがスクロールをすると関数を呼び出しという、ブラウザへの負荷が重くなるのが欠点でした。

画面がリサイズされれば再度位置を取得し直し、ページの一番上からアニメーションをかける要素までの距離（値）を取得し、常に対象要素までのを値を比較し続けるということが必要だったのです。

IntersectionObserverによってスクロールアニメーションがより便利に！

Intersection Observerを使うと何がいいかというと

『特定の要素が画面内(ブラウザwindow内)に入ってきた時に関数を実行できること』

これです！

jQueryで行っていたように、常に関数を実行してスクロールの値を取得する負荷もありません。
何より条件の指定方法が「要素が画面内に入ってきた時」というわかりやすい指定なのが魅力です。

また、Intersection Observerのオプションを使えば下記のようなことも可能です。

・要素がブラウザ画面内の半分の位置までスクロールされたら、アニメーションを実行
・要素がブラウザ画面内に入る前にアニメーションを実行(pxで指定することが可能)
・要素がブラウザ画面内に入った1回目だけ、アニメーションを実行

これらを従来のjQueryで実装するとどうしてもコードが複雑になっていました。IntersectionObserverのプロパティを使うと、コードもスッキリします。

今後のWebアニメーションを可能性を秘めたIntersectionObserver。これからも学習してより理解を深めていきます。

今回は概要をお伝えしましたが、次回はコードを含めた実装方法をお伝えしたいと思います！！