【JavaScript】ふわっと画像を表示させる

前回より時間が少し空きましたが、
今回はJavaScriptでスクロールすると、
ふわっと画像が表示されるというアニメーションを作りました。

まず制作したもの↓

See the Pen Untitled by ri-tama (@ri-tama) on CodePen.

※上手く表示ができないみたいで、CODEPENのリンクを踏んでいただけると、
　どのようになっているかわかります。原因究明します。(1/5追記)

今回のポイントですが
IntersectionObserverという監視の仕組みを使っております。

説明していきます。
・まず適当な文字と適当な画像を表示できるようHTMLに書いてください。

・画像をふわっと表示させるのが最終目標となりますので
　画像をJSで操作できるように、変数targetに中身を入れます。

    const target = document.querySelector('img');

・監視する役目の人を一人作ります(=インスタンスを作る)
　ついでに仕事と、そのオプションをセットします。
　

    const observer = new IntersectionObserver(callback,options);
    observer.observe('target');

・監視の人にtargetを監視せよ、という命令を作ります。

    observer.observe('target');

・さきほど監視人に与えた仕事の中身を作っていきます(callbackという関数を作ります)

function callback(entries){
  console.log('entries[0]'); //動きを確かめるためにここは書いてます。
  
  if(entries[0].isIntersecting){
     entries[0].target.classList.add('appear');
    } else {
     entries[0].target.classList.remove('appear');
    }
/*if文の中身は、entriesという引数の中のisIntersectingを監視し
  それがtrueなら、cssのappearをtargetのクラスに追加し、
  falseならappearを分離させます。*/

・完成品ではif文以下はこのように記述しています。(callback関数にobsという引数も追加してます)

if(!entries[0].isIntersecting){
    return;
  } 
//!で論理否定しているので、falseならreturnで処理を止めるよう指示しています。
  entries[0].target.classList.add('appear');
//ここは上と変わらず。
  obs.unobserve(entries[0].target);
//obsという引数を与えて、1度処理が終わった後は監視を止めるようにしています。

JSの中身について説明しました。
あやふやな部分も少しある為、また学習しながら追記もしていきます。
ちなみに参考文献ですが

ドットインストールさんの詳解JavaScript Intersection Observer API編
を学んだうえで、自分の解釈を取り入れつつ今回の記事を投稿しました。
備忘録として、アウトプットとして、誰かの参考になれば、と思い積極的に今後も書いていきます。

次はUI回りを作成できるようにしたいので、勉強していきます。
最後まで読んでいただきありがとうございました！