フェードインの開始位置とタイミングについて

画面をスクロールしてフェードインしているのですが、
現状は画面の下の方で4分の1程度見えてくるとフェードイン始めてしまいます。
これを画面の中央（2分の１）くらいの高さにきたらフェードインするようにしたいのですが、
方法はありますでしょうか？

html
1<head>
2<script src="js/jquery-3.1.1.min.js"></script>
3</head>
4<body>
5<div class="scrollanime">
6	<img src="img/n01.png" alt="画像">
7</div>
8</body>
9

javascript
1$(function () {
2    $(window).scroll(function () {
3        const wHeight = $(window).height();
4        const scrollAmount = $(window).scrollTop();
5        $('.scrollanime').each(function () {
6            const targetPosition = $(this).offset().top;
7            if(scrollAmount > targetPosition - wHeight + 100) {
8                $(this).addClass("fadeInDown");
9            }
10        });
11    });
12});

css
1.scrollanime {
2	opacity: 0;
3	transition-delay: 600ms;
4} 
5.fadeInDown {
6    animation-name: fadeInDown;
7    animation-duration: 2s;
8    animation-fill-mode: forwards; 
9    transition-delay: 2s;
10}
11@keyframes fadeInDown {
12   0% {
13		opacity: 0;
14	}
15	100% {
16    opacity: 1;
17    transform: translate(0);
18	}
19}

試したこと1 wHeight + 数値の確認

javascript
1if(scrollAmount > targetPosition - wHeight + 100) {

試したこと2 CSSで開始時間を遅らせる

css
1transition-delay: 2s;

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

回答1件

ベストアンサー

試したこと2 CSSで開始時間を遅らせる

条件を満たしてしまうとスクロールやめても待てば動いてしまうのでこちらは変えずに、

試したこと1 wHeight + 数値の確認

数値の方を変えてみましょう。
~~条件式の右側が小さくなれば良いはずですから、~~
~~+100を取るとか-にしてみるとか…~~
※試行錯誤して欲しかったのだけどもミスリードになるから打消し線

(wHeight / 2)が画面の半分の高さになるので、
targetPosition - (wHeight / 2)としてあげると画面の半分くらいで開始するかなと。

以下蛇足です。
scrollAmount = $(window).scrollTop()　←画面の一番上
targetPosition = $(this).offset().top　←要素の上っ面の位置
wHeight = $(window).height()　←画面の高さ
変数の中身が何なのか？確認しながら計算すると理解が深まるかと。

蛇足2
お前計算ミスってるぞというのは遠慮なく突っ込んでください。
違うだろっというツッコミも歓迎いたしますです。

蛇足3
手持ちのサイトで似たようなものを使っていたので、
要素が出現するタイミングを少し遅らせるようにコード改修しました。
自分はそれほど気にならなかった点なので貴重な意見かなと。
ありがとうございます。

投稿2021/04/23 09:19

編集2021/04/23 09:39