JQueryでスクロールによって要素ごとにフェードインさせることができない。

Question

以下のコードによって、スクロールすると下からフェードインする機能を実装しようとしていますが、上手く実装できません。

できたこと

・スクロールによってフェードインさせる(一気に)
・少しでもスクロールするとフェードインする

できないこと

・少しでもスクロールすると、ページの上から下まで'fadein-all'で囲った要素が全てフェードインしてしまう
・JQuery内の数値(300など)を変更しても上記の動きと全く同じ動作をする

JQueryに関してはほぼコピペで実装したため、テストなどを詳しくすることができません。

情報量が少なすぎて申し訳ありませんが、原因など分かる方はいらっしゃいませんでしょうか。

$(function(){
    $(window).scroll(function (){
        $('.fadein-all').each(function(){
            var position = $(this).offset().top,
                scroll = $(window).scrollTop(),
                windowHeight = $(window).height();
            if (scroll > position - windowHeight + 300){
              $(this).addClass('active');
            }
        });
    });
});

.fadein-all {
  opacity: 0;
  transform: translate(0, 200px);
  transition: all 1500ms;
}

.fadein-all.active {
  opacity: 1;
  transform: translate(0, 0);
}

        <div class="fadein-all">
          <div id="about">
            <a href="URL">
              <h2 class="about-title">ABOUT</h2>
                内容
            </a>
          </div>
        </div>

        <div class="fadein-all">
          <div id="works">
            <a href="">
              <h2 class="works-title">WORK</h2>
　　　　　　　　　内容
            </a>
          </div>
        </div>

Comments

[Lhankor_Mhy]

ご提示のコードを拝見しましたが、「ページの上から下まで'fadein-all'で囲った要素が全てフェードインしてしまう」ということは起きませんでした。

つまり、問題が再現しません。

↓サンプル
https://jsfiddle.net/Lhankor_Mhy/ykgqsL86/

[Yuu412]

私も別サイトでテストしてみましたが、上手く動作いたしました。他のコードが影響して、上手く動作していないことは考えられるのでしょうか？
ちなみに、クラス名に関しては、(fadein-all)はここでしか使用しておりません。

[Lhankor_Mhy]

scroll > position - windowHeight + 300

とあるので、fadein-allが、300px以下になることがあるようでしたら、同時に発火することもあるかと思いますよ。

[Yuu412]

要素の高さがということですかね？

[Lhankor_Mhy]

ああ、はい、そのとおりです。

[Lhankor_Mhy]

scroll > position - windowHeight + 300
↓
scroll + windowHeight > position + 300
↓
スクリーンの下端 > fadein-allの上端 + 300px

という意味です。
つまり、スクリーンの下端よりさらに300px下に、fadein-allの上端が届いていれば、発火します。

[Yuu412]

その値を-100 にしてみましたが、全て同時に発火します・・・

[Lhankor_Mhy]

-100の場合、スクリーンの下端の上100pxなので、それより上に上端が届いているfadein-allはすべて発火するはずです。

[Yuu412]

スクリーン上に見えていない要素(上端含め)も全てが同時に発火します。

[Lhankor_Mhy]

そうなんですね……

そうすると、
console.log( position, this );
if (scroll > position - windowHeight + 300){
などとして、値を調査してみるなどしてはいかがでしょうか？

[Yuu412]

ログを見ることができる関数ですね。
試してみます。ありがとうございます。

Answer 1

JQueryではなくJSで記述することで解決しました。