jQuery：スクロールして画像が可視範囲に入ったらアニメーションをスタートさせたい。

Question

前提・実現したいこと

スクロールして画像が可視範囲に入ったらアニメーションをスタートさせたい。

section3にある、imgが表示範囲に入った際に、画像がフェードインするようにしたい。

発生している問題・エラーメッセージ

画像が可視範囲に入る以前に
サイトを開いた時点でアニメーションが作動してしまう。

該当のソースコード

<section id="section3" class="section section3">
        <h1>Company Profile</h1>
        <div class="img-wrap3">
          <img src="/Users/xxxx/Desktop/xx/images/header_image.jpg">
        </div>
</section>

    .img-animation {
      animation: img-opacity 2s cubic-bezier(.4, 0, .2, 1);
      overflow: hidden;
      position: relative;
    }


    .img-animation:before {
      animation: img-animation 2s cubic-bezier(.4, 0, .2, 1) forwards;
      background: #fff;
      bottom: 0;
      content: '';
      left: 0;
      pointer-events: none;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 1;
    }

    @keyframes img-opacity {
      0% {
        opacity: 0;
      }
    }

    @keyframes img-animation {
      100% {
        transform: translateX(100%);
      }
    }

$(window).on(function() {
  const image = document.querySelectorAll('.img-wrap3');

  const observer = new IntersectionObserver(function(entries) {
    entries.forEach(function(entry) {
      if (entry.intersectionRatio > 0) {
        entry.target.classList.add('img-animation');
      } else {
        entry.target.classList.remove('img-animation');
      }
    });
  });

  Array.prototype.forEach.call(image, function(img) {
    observer.observe(img);
  });
　})

補足情報（FW/ツールのバージョンなど）

https://firstlayout.net/css-animation-of-images/
上記サイトのスクロールアニメーションを参考にしています。

ここにより詳細な情報を記載してください。

Answer 1

【jQuery】特定の位置まで来たらイベントを実行 | blog del Teorico

とか、参考になりませんでしょうか。検索したキーワードは、「jquery スクロール イベント」です。

【追記】

$(window).on(function() {

を

$(window).on('load', function() {

に変更したら、意図通りに動きませんか？

Comments

[rrgsn]

正直よくわかりません。。。。
$(window).on(function() {
として変更してみましたが、どうにも治らないですね.......

[Yasumichi]

jQuery 云々よりも CSS との整合が取れていないような？

img-animation クラスでアニメーションを実現したいんですよね？

css 側で該当クラスの宣言がないような？

.img-ani は、示された html の外側で付与されているのでしょうか？

[rrgsn]

失礼しました。
色々と試行錯誤しており、以前のコードを載せてしまいました。
編集しましたが、こちらではいかがでしょうか

[Yasumichi]

元の回答に【追記】で修正案を載せました。確認してみてください。

[rrgsn]

ああああ！なんと！！
望む通りの挙動になりました！！！！
この挙動を得るために数日費やしました......
本当にありがとうございます！！！！

[rrgsn]

ちなみに、同じ仕様で、別アニメーションを他の画像に反映させるにはどうしたらよいですか？

const image = document.querySelectorAll('img-wrap2, .img-wrap3');

としたり、

entry.target.classList.add('img-animation2','img-animation3');

その他丸々コピーして、やったりしましたが、
うまく別のアニメーションを反映できず

[rrgsn]

上記解決しました。

Array.prototype.forEach.call(image, function(img) {
observer.observe(img);
});
　})

の部分を除外したものをコピーしていたので、
該当ソースコードJSの全てコピーして、class名だけ変えて反映できました。

[Yasumichi]

恥ずかしい話、Intersection Observer API 自体を今回、初めて知りました。

それぞれ、別の Intersection Observer を立てるか、entry.target.classList.add の前に 'img-animation2' を持ってるかどうかとか、判定して付与するクラスを変えるかぐらいですかね。

[rrgsn]

本当にご丁寧にありがとうございました。
これで作業が進められます。。。。

Answer 2

$(window).on('load', function() に変更することで解決。
（ベストアンサーの方の助言により解決）

（補足）
下記は複数のクラスに別々のアニメーションを付与する場合のコード。

  $(window).on('load', function() {
    const image = document.querySelectorAll('.img-wrap2');

    const observer = new IntersectionObserver(function(entries) {
      entries.forEach(function(entry) {
        if (entry.intersectionRatio > 0) {
          entry.target.classList.add('img-animation2');
        } else {
          entry.target.classList.remove('img-animation2');
        }
      });
    });



  Array.prototype.forEach.call(image, function(img) {
    observer.observe(img);
  });
　})


  $(window).on('load', function() {
    const image = document.querySelectorAll('.img-wrap3');

    const observer = new IntersectionObserver(function(entries) {
      entries.forEach(function(entry) {
        if (entry.intersectionRatio > 0) {
          entry.target.classList.add('img-animation3');
        } else {
          entry.target.classList.remove('img-animation3');
        }
      });
    });



  Array.prototype.forEach.call(image, function(img) {
    observer.observe(img);
  });
　})

Answer 3

  $(window).on('load', function() {
    const image = document.querySelectorAll('.img-wrap2');

    const observer = new IntersectionObserver(function(entries) {
      entries.forEach(function(entry) {
        if (entry.intersectionRatio > 0) {
          entry.target.classList.add('img-animation2');
        } else {
          entry.target.classList.remove('img-animation2');
        }
      });
    });



  Array.prototype.forEach.call(image, function(img) {
    observer.observe(img);
  });
　})


  $(window).on('load', function() {
    const image = document.querySelectorAll('.img-wrap3');

    const observer = new IntersectionObserver(function(entries) {
      entries.forEach(function(entry) {
        if (entry.intersectionRatio > 0) {
          entry.target.classList.add('img-animation3');
        } else {
          entry.target.classList.remove('img-animation3');
        }
      });
    });



  Array.prototype.forEach.call(image, function(img) {
    observer.observe(img);
  });
　})

on('load', を追記することで解決。