フィードインのコードが機能しない

フィードインのコードが機能しません。
エラー自体は出ていませんでした。また、consoleで確認したところ、.add classのコードが機能していませんでした。

PHP
1
2						<div class="main-header">
3							<div class="header-mainlogo">
4								<div class="header-logo" id="header-subulogo">
5									<h1>
6									<span>Hi</span>
7									g
8									<span class="break-down">h</span>
9									<span>Q</span>
10									u
11										<span>al</span>
12										it
13										<span class="break-up">y</span>
14									<span>W</span>
15									e
16									<span>b</span>
17									<span class="break-right">D</span>
18									e
19									<span>si</span>
20									g
21									<span>n</span>
22									</h1>
23								</div>
24									<div class="header-logo">
25										<h1>
26											<span class="break-down1">Re</span>
27											<span>s</span>
28											po
29											<span>si</span>
30											v
31											<span class="break-up">e</span>
32											<span>D</span>
33											es
34											<span>i</span>
35											g
36											<span>n</span>
37										</h1>
38									</div>
39									<div class="header-logo">
40										<h1>
41											<span class="break-down1">C</span>
42											<span>o</span>
43											d
44											<span>i</span>
45											n
46											<span>g</span>
47										</h1>
48									</div>
49									<div class="header-logo">
50										<h1>
51											<span class="break-down1">W</span>
52											<span>o</span>
53											rd
54											<span>p</span>
55											re
56											<span>ss</span>
57										</h1>
58									</div>
59								</div>
60									<div class="header-title">
61										<p>ホームページの作成の相談承ります。</p>
62									</div>
63									<div class="header-logo">
64										<p>お問合せ</p>
65									</div>
66						</div>
67				<div>
68

css
1.effect-scroll {
2  opacity: 1;
3  transform: translate(0, 0);
4}
5#header-subulogo{
6  padding-top: 150px;
7  opacity: 0;
8  transform: translate(0, 10px); /* フェードインで動く高さを指定 */
9  transition: all 2000ms; 
10}

js
1jQuery(function () {
2  jQuery(window).scroll(function () {
3    jQuery("#header-subu").each(function () {
4      var elemPos = $(this).offset().top; /* 要素の位置を取得 */
5      var scroll = $(window).scrollTop(); /* スクロール位置を取得 */
6      var windowHeight = $(window).height(); /* 画面幅を取得（画面の下側に入ったときに動作させるため） */
7      if (scroll > elemPos - windowHeight) {
8        /* 要素位置までスクロール出来たときに動作する */
9        jQuery(this).addClass("effect-scroll");
10      }
11    });
12  });
13  jQuery(window).scroll();
14});

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

回答1件

ベストアンサー

まずコードをテストしまいたがもともとどんなアニメーションを希望されているかが
不明です。".effect-scroll"がどんな意図なのかが判りませんでした。
なので
ターゲットがスクロールで画面内に表示する時クラス追加する処理としました。

単純にjavascriptは間違いが3か所

javascript
1jQuery(function () {
2	jQuery(window).scroll(function () {
3		// id= "header-subu"が存在しない"#header-subulogo"では？
4		jQuery("#header-subulogo").each(function () {
5			var elemPos = $(this).offset().top; /* 要素の位置を取得 */
6			var scroll = $(window).scrollTop(); /* スクロール位置を取得 */
7			//var windowHeight = $(window).height(); /* 画面幅を取得（画面の下側に入ったときに動作させるため） */
8			// $(window).height();はスクロールも含めた高さ
9			var windowHeight = window.innerHeight; // 画面の高さ
10			if (scroll > elemPos - windowHeight) {
11				/* 要素位置までスクロール出来たときに動作する */
12				jQuery(this).addClass("effect-scroll");
13			}
14		});
15	});
16	//これなんの処理？
17	//jQuery(window).scroll();
18});

こちらもそのままCSSに書いても何も動かない
動作目的が不明の為フェードインという事で再設定
もし違っていたら直してください。

CSS
1.effect-scroll {
2/* コメント化しました
3	opacity: 1;
4	transform: translate(0, 0);
5*/
6	opacity: 0;
7	animation-name: fadeIn;
8	animation-duration: 4s; 				/*アニメーション時間 */
9	animation-timing-function: ease-out;	/* アニメーションさせるイージング */
10	animation-delay: 1s;					/* アニメーション開始させる時間 */
11	animation-iteration-count: 1;			/* 繰り返し回数 */
12	animation-direction: normal;			/* 往復処理をするかどうか */
13	animation-fill-mode: forwards;			/*アニメーション後のスタイルをどうするか*/
14}
15#header-subulogo{
16	padding-top: 150px;
17	opacity: 0;
18/* コメント化しました
19	transform: translate(0, 10px); / フェードインで動く高さを指定 /
20	transition: all 2000ms; 
21*/
22}
23@keyframes fadeIn { /*animetion-nameで設定した値を書く*/
24  0% {opacity: 0} /*アニメーション開始時は不透明度0%*/
25  100% {opacity: 1} /*アニメーション終了時は不透明度100%*/
26}