Wordpressへのスクロールフェードイン実装において、全て同時に動いてしまう現象を治したい

タイトルにもあるように、Wordpressへのスクロールフェードイン実装において、全て同時に動いてしまう現象を治したいのが、今回の悩みです。

自作でWordpressテーマを作成しています。
ライブラリを使用したスライダーや、JavaScriptでハンバーガーメニューを作成したりして、異常なく動作しています。

この度、スクロールによるフェードインを実装しようとしたところ、うまく動かないことに気がつきました。
実装しようとしているのは、下記のようなサイトのもので、下からフワッとフェードインするようなイメージです。
参考： https://imasashi.net/demo/fadein/
解説ページ： https://imasashi.net/element-fadein.html

フェードインさせたいコンテンツにclassを入れてみたのですが、どうやらスクロールで全て同時に動いてしまっているようなのです。
現象としては、下記の質問者様によく似ているのですが、試しに、全てコピペしてみたところ挙動に改善は見られませんでした。
過去の質問： https://teratail.com/questions/137528

何か、スクリプトの記述の問題、jsファイルの読み込み順序の問題など、別な問題点があるのか…と予想してみたのですが、どうにもならなくてこちらで質問させていただきました。
心当たりがある方や、解決策をお持ちの方、ご教示いただけますと幸いです。

よろしくお願いいたします。

以下、コードは上記サイトからの引用です。

HTML
1<div>
2  <section class="fadein">
3    <h2>情報設計</h2>
4    <p>何かしらの説明文。何かしらの説明文。何かしらの説明文。</p>
5  </section>
6  <section class="fadein">
7    <h2>サイトマップ</h2>
8    <p>何かしらの説明文。何かしらの説明文。何かしらの説明文。</p>
9  </section>
10  <section class="fadein">
11    <h2>ワイヤーフレーム</h2>
12    <p>何かしらの説明文。何かしらの説明文。何かしらの説明文。</p>
13  </section>
14</div>

CSS
1/* 画面外にいる状態 */
2.fadein {
3  opacity : 0.1;
4  transform : translate(0, 50px);
5  transition : all 500ms;
6}
7
8/* 画面内に入った状態 */
9.fadein.scrollin {
10  opacity : 1;
11  transform : translate(0, 0);
12}

JS
1$(function(){
2  $(window).scroll(function (){
3    $('.fadein').each(function(){
4      var elemPos = $(this).offset().top;
5      var scroll = $(window).scrollTop();
6      var windowHeight = $(window).height();
7      if (scroll > elemPos - windowHeight + 200){
8        $(this).addClass('scrollin');
9      }
10    });
11  });
12});

hatena19

2021/03/13 07:01

提示のコードで問題なく動作しているようです。実際のHTMLはもう少し複雑ですよね。症状が再現できるコードを提示してください。

k-katapashi

2021/03/14 09:43

HTMLに欠陥があったようです！ありがとうございます！

行動規範の内容に同意します

回答2件

本件、解決しました！
原因特定しましたが…大変、お恥ずかしいお話です…。

amiya-se 様が記載してくださったように、「コードの意味を分解して理解する」という手法で、今一度、再確認したところ、

var windowHeight = $(window).height();

上記部分で、サイトの高さが読み込めていないことがわかりました。
ではなぜ、高さが読み込めていないのかと言うことですが、すご〜く初歩的な話、header.phpの<!DOCTYPE html>が抜けておりました。
作業していく中で消してしまったのか、最初からなかったのかわからないんですが、こちらを修正したところ、正常に動きました！
参考： https://teratail.com/questions/239692

この発想に行き着いたのも、amiya-se 様の回答が元になったので、ベストアンサーとさせていただきました。
思い込みのミスって命取りですね。大変お騒がせしました、ありがとうございました！
今後も精進いたします。。。

投稿2021/03/14 09:53

k-katapashi

総合スコア18

ベストアンサー

###　一番下に追記したよっ

全て同時に動いてしまう現象を治したい

たぶん3つ全部動くことを指されているのだと思いますが、
解説のURLの方に以下の文言がありました。

ほんで、下はちょっとした応用編です。

横に並ぶ要素を左から右でややズラすには
※imasashi.netより抜粋

以下転記です。

CSS
1/* 2つ目の要素に200msのdelayをかける */
2#effect2 > div .fadein:nth-of-type(2) {
3	-moz-transition-delay:200ms;
4	-webkit-transition-delay:200ms;
5	-o-transition-delay:200ms;
6	-ms-transition-delay:200ms;
7	}
8/* 3つ目の要素に400msのdelayをかける */
9#effect2 > div .fadein:nth-of-type(3) {
10	-moz-transition-delay:400ms;
11	-webkit-transition-delay:400ms;
12	-o-transition-delay:400ms;
13	-ms-transition-delay:400ms;
14	}

参考URL
https://imasashi.net/element-fadein.html

以下蛇足です。

何と申しますか…
ご自身で実装および解説のURLを出されているのだから、
落ち着いて下までよく読んでください…かなぁ。
これで動かなければその旨をお伝えくださいませ。
「違う！そうじゃないんだ！！もっとこう革新的なアレがっ」
という場合も、その旨お知らせいただきましたら善処いたします。

###　追記です。
OK、お知らせ貰ってないけど何となくわかった！
縦方向に並ぶ3つが同時に動くのがイヤという意味ですね？
CSSで制御するのは横並びの時だけですね。いやはや申し訳ないです。

TOPからのスクロールした距離と要素の一番上の位置を取得して、
画面内に入った要素のみclassを当てるように記述を変えればお望みの挙動になるかと思います。
心優しい人がサンプルコードを出してくれるはずっ

投稿2021/03/13 06:49

編集2021/03/13 07:11

退会済みユーザー

総合スコア0

k-katapashi

2021/03/13 07:14

迅速なご回答ありがとうございます！説明がわかりづらくて申し訳ありません…。はい、おっしゃる通りです！「1つの親要素内の子要素が3つ同時に動いてしまう」ということではなく、「1ページ内において fadein のクラスを与えた全ての要素が同時に動いてしまう」ということが起きていて困っているという状況です。ページをスクロールすると、fadeinのクラスを与えた要素のフェードインアニメーションが開始され、可視範囲以外のものもつられて動いてしまっているため、ページ下部にいくと既にフェードインアニメーションが終わった状態になっている…という感じです。文章にすると、なかなか難しいです…。

退会済みユーザー

2021/03/13 07:37 編集

$(window).scrollTop();//サイトTOPからのスクロール量 $('要素').offset().top;//要素の上面の位置 if文で二つを比較して、お好みの位置に来た要素にだけclassを付与してやるように書き換えればよいかと。タイミングをずらしたいときは条件式に「どれくらいの差で付与するか？」という記述を足してあげればいいです。追記です。 scrollイベントを利用してあげると良いかもです。

行動規範の内容に同意します

あなたの回答