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も見ています
-
風水の観点で選ぶ観葉植物とは?置き場所や上げたい運気ごとの注意点を紹介!
観葉植物で運気をアップするコツを、風水デザイン1級建築士の福島昌彦さんに伺った。
-
PythonやJavaScriptのように実質的に数の桁数を無限に扱える言語と、全く無限に使えない言
JavaScript
-
Javascriptエラーの原因が分からない
JavaScript
-
HTMLタグに複数のクラスを設定する方法がわからない
JavaScript
-
-
4
システムエンジニアの適正について
C言語・C++・C#
-
5
Javascript で共通の処理をどこまでまとめるべきか分からないのでアドバイスお願い致します
JavaScript
-
6
jsで質問です。 displayプロパティを用いて下記の情報4〜6のtrタグをボタンで表示・非表示を
JavaScript
-
7
var exports = exports || {}; ← この意味を教えてください。
JavaScript
-
8
スカラーのベクトル微分
その他(プログラミング・Web制作)
-
9
二次元配列を使って順位をだすときに、同点の場合の順位をだす方法を教えて下さい。
JavaScript
-
10
javascriptで質問です。 displayプロパティを使用してテーブルの一部を表示・非表示をし
JavaScript
-
11
awsにApacheとPHPを入れて、何故か画面が500エラーで表示できません! それに、ログファイ
PHP
-
12
CSS、Bootstrapについて containerはなんのためにあるのですか?単にレイアウトする
HTML・CSS
-
13
テーブルのセルデータを自動改行させずに、はみ出た部分は切り捨てたい
HTML・CSS
-
14
Webサイト内に埋め込んだmp4動画内にリンクを設定したい
その他(プログラミング・Web制作)
-
15
htmlで<form>~</form>を並べて記述すると一行置きに記述されてしまうのですがこれを回避
HTML・CSS
-
16
JavaScript 超初心者です。 Document.writeがなぜか反映されません。何が間違っ
JavaScript
-
17
ブラウザ自体の事じゃなくてJavaScriptで書かれたブラウザ上で動作するアプリのことをなんといい
JavaScript
-
18
Q&A掲示板の入力フォームに文字数制限を設けて入力可能な文字数を表示したい
JavaScript
-
19
応用情報技術者試験の令和元年秋、午後のプログラムの問題がわからないです。
C言語・C++・C#
-
20
PHPでこのコード自体に意味は無いんですけど、上のifと下のifの違いってなんですか?個人的には下の
PHP
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Javascriptのhtml出力についてa...
-
XMLでのAttributeを持ったNode...
-
DOM要素を削除しても、イベント...
-
excle VBA とweb上の検索を利用...
-
javascript:(function(q, a, z)...
-
showModalDialogで開いた画面を...
-
画像のサイズを動的に変更する
-
価格計算フォーム作成について
-
ブラウザのウィンドウサイズに...
-
FireFoxのjavascriptで自動でキ...
-
デフォルトのリンクの色
-
javaScriptのコードの修正をお...
-
functionから別のfunctionを実...
-
同じIDで定義した要素の配列を...
-
翌月を取得するGASが分かりません
-
ActiveXobjectが作成できない
-
ジェネレーターの作り方
-
関数でy=g(x)のgとは何の略です...
-
google apps scriptの終了のさせ方
-
なぜmatchメソッドがエラーにな...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavaScript window.openで開く...
-
このjavascriptのif文、条件式...
-
FireFoxのjavascriptで自動でキ...
-
DOM要素を削除しても、イベント...
-
javascriptの基本的なことだと...
-
文字を一文字ずつ表示
-
showModalDialogで開いた画面を...
-
Null またはオブジェクトではあ...
-
Javascriptのhtml出力についてa...
-
codejump 模写コーディングgall...
-
LaTeX:数式を等号揃えにする方法
-
javascriptのdocument.allにつ...
-
excle VBA とweb上の検索を利用...
-
Latexに関する質問です。
-
乗換案内 VBAで操作したい
-
JavaScriptのdocument.all("変...
-
Javascriptで定期的にF5を押す...
-
選択によってsubmitボタンの色...
-
スマホでフォームにフォーカス...
-
compatModeとは?
おすすめ情報