codejump 模写コーディングgalleryの背景画像fadein fadeoutについて

codejumpのgalleryサイトの模写コーディングをしているのですが、accessからcontactにかけて背景画像をfadein,fadeoutさせるとこを素のjavascriptに書き直してみたのですが、うまく表示されません。galleryの途中から一瞬表示されて消えてしまいます。どなたか解る方いらっしゃいましたら。ご教授いただけると幸いです。
javascriptのコードは以下になります。
window.addEventListener('scroll', ()=> {
let scroll = window.pageYOffset || document.documentElement.scrollTop;
let access_position = document.getElementById('access').getBoundingClientRect().top - window.innerHeight;
let contact_position = document.getElementById('contact').getBoundingClientRect().top - window.innerHeight;

if (scroll >contact_position) {
if (scroll < access_position) {
document.querySelector('.bg').style.display = 'block';
} else {
document.querySelector('.bg').style.display = 'none';
}
} else {
document.querySelector('.bg').style.display = 'none';
}
});

No.1 回答者： fujillin 回答日時： 2024/03/18 16:49

こんにちは

HTMLがないのではっきりとはしませんけれど、idがaccessとcontactの要素の表示具合によって処理を決めようとしているものと推測します。

◇「要素の位置」に関して
位置の判定で、何を判定しようとしているのかがよくわかりません。
getBoundingClientRect().top は要素の上端のviewportからの距離なので、これが0という事は、要素の上端がviewportの上端に接しているという事です。
もしも、要素が「（下部から）表示を始めたら」をチェックしたいのなら、
　getBoundingClientRect().top ＜ window.innerHeight
をチェックするのではないでしょうか？
(ご提示のように先に減算しておくのなら、正か負かのチェック）

また、最近のブラウザであれば要素の表示状態を監視できる、Intersection Observerが使用できますので、こちらを利用する方法もあると思います。
https://developer.mozilla.org/ja/docs/Web/API/In …


◇「背景画像をfadein,fadeoutさせる」に関して
ご提示のスクリプトでは、要素（.bg）のdisplay = 'block'/'none' を切り替えているだけですので、要素の表示/非表示の切り替えになっています。
また、この要素が非表示になると全体の表示レイアウトが変わりますので、多分、#contact要素の位置が変わるはずと思います。
（非表示要素は、レイアウトから外されるので、高さ0換算になります）

ご質問文には、「fadein,fadeoutさせる」とありますので、レイアウトから外す（＝非表示）のではなく、レイアウト上に残したまま、透明度を変化させたいのではないのでしょうか？
もしもそうであるなら、要素の style.opacity を0～1まで変化させるアニメーションを行うことになります。
スクリプトで行うのであれば、上記の値を逐次変化させてアニメーションを行います。
一方で、この程度のアニメーションであれば、CSSアニメーションを利用したほうが簡単に実現できます。
こちらの方法であれば、クラス名の 付与/削除 程度のスクリプトで実現できますので。

また、ご質問文には「背景画像をfadein,fadeout」とありますので、要素全体ではなく「あくまでも背景画像だけを変化させたい」という意味とも取れます。
（上に記した方法は、要素全体を変化させる方法です）
その場合は、背景画像だけをコントロールする必要がありますので、若干の工夫が必要になると考えられます。
以下が、ご参考になることでしょう。
（別要素にするか疑似要素にしてしまうのが簡単と思います）
https://web-camp.io/magazine/archives/89321

この回答へのお礼

丁寧なご回答ありがとうございました。ご指摘のように何を判定してるかきちんと見直してコードを修正しましたところ、上手く表示させることができました。
拙いコードでもうしわけありませんでした。参考にさせていただきます。

お礼日時：2024/03/27 10:46