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';
}
});
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
こんにちは
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
丁寧なご回答ありがとうございました。ご指摘のように何を判定してるかきちんと見直してコードを修正しましたところ、上手く表示させることができました。
拙いコードでもうしわけありませんでした。参考にさせていただきます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript Colorboxがうまく設置できません 2 2024/01/13 16:59
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript 【JavaScript】検索がヒットした場合、プルダウンをオープンで表示させる方法 2 2023/09/06 14:02
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS CSSでつくったメニューのアニメーションがうまく動かない・変えたい 2 2024/01/21 11:48
- JavaScript コードレビューをお願いします。 3 2023/12/17 01:07
このQ&Aを見た人はこんなQ&Aも見ています
-
外出時に「待たせる妻」vs イライラする「待つ夫」は日本だけ?見習いたい海外事情
夫の家事参加に積極的なイメージのある海外でも、同様の事例はあるのか。結婚カウンセラーの佐竹悦子さんに伺ってみた。
-
PythonやJavaScriptのように実質的に数の桁数を無限に扱える言語と、全く無限に使えない言
JavaScript
-
HTMLタグに複数のクラスを設定する方法がわからない
JavaScript
-
Javascriptエラーの原因が分からない
JavaScript
-
-
4
var exports = exports || {}; ← この意味を教えてください。
JavaScript
-
5
スカラーのベクトル微分
その他(プログラミング・Web制作)
-
6
javascriptで質問です。 displayプロパティを使用してテーブルの一部を表示・非表示をし
JavaScript
-
7
jsで質問です。 displayプロパティを用いて下記の情報4〜6のtrタグをボタンで表示・非表示を
JavaScript
-
8
htmlで<form>~</form>を並べて記述すると一行置きに記述されてしまうのですがこれを回避
HTML・CSS
-
9
システムエンジニアの適正について
C言語・C++・C#
-
10
Javascript で共通の処理をどこまでまとめるべきか分からないのでアドバイスお願い致します
JavaScript
-
11
テーブルのセルデータを自動改行させずに、はみ出た部分は切り捨てたい
HTML・CSS
-
12
Q&A掲示板の入力フォームに文字数制限を設けて入力可能な文字数を表示したい
JavaScript
-
13
awsにApacheとPHPを入れて、何故か画面が500エラーで表示できません! それに、ログファイ
PHP
-
14
CSS、Bootstrapについて containerはなんのためにあるのですか?単にレイアウトする
HTML・CSS
-
15
Webサイト内に埋め込んだmp4動画内にリンクを設定したい
その他(プログラミング・Web制作)
-
16
二次元配列を使って順位をだすときに、同点の場合の順位をだす方法を教えて下さい。
JavaScript
-
17
複雑なシフト表から1日ごとの出勤者、シフトを抜き出したいです
Excel(エクセル)
-
18
PythonのTkinter詳しい方へ。画像や言葉の意味を答える3択クイズを作るのに手間取っています
その他(プログラミング・Web制作)
-
19
大至急。webのシングルページを作ろうと考え、イラレでデザインをしました。 それからの手順で悩んでる
HTML・CSS
-
20
【JavaScript?HTML?】Webページでこのページは戻ることは出来ませんと表
JavaScript
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JavaScript window.openで開く...
-
showModalDialogで開いた画面を...
-
javascriptの基本的なことだと...
-
DOM要素を削除しても、イベント...
-
window.onloadを複数実行したい...
-
Latexに関する質問です。
-
excle VBA とweb上の検索を利用...
-
iframeのソースを取得したい
-
javascriptのdocument.allにつ...
-
ie操作 フレームのURLが...
-
Null またはオブジェクトではあ...
-
google マップ サイズ変更
-
オンマウスについて
-
ドロップダウンメニューを短縮...
-
このjavascriptのif文、条件式...
-
IEのイベントでのウインドウ...
-
Boolean型配列中のTrueの有無を...
-
ActiveXobjectが作成できない
-
C#テキストボックスの文字を配...
-
<a>タグのテキストを取得
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
codejump 模写コーディングgall...
-
このjavascriptのif文、条件式...
-
文字を一文字ずつ表示
-
DOM要素を削除しても、イベント...
-
FireFoxのjavascriptで自動でキ...
-
Javascriptのhtml出力についてa...
-
excle VBA とweb上の検索を利用...
-
Null またはオブジェクトではあ...
-
webページ上のTabキーの動き
-
XMLでのAttributeを持ったNode...
-
JavaScript window.openで開く...
-
ブラウザのウィンドウサイズに...
-
javascriptのdocument.allにつ...
-
javascriptの基本的なことだと...
-
responseTextについて
-
showModalDialogで開いた画面を...
-
iframeのソースを取得したい
-
removeEventListenerの必要性
-
クリッカブルマップのリンク部...
-
ラジオボタンをクリックしたい
おすすめ情報