質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

JavaScriptスクロールに合わせた背景色の切り替え処理(Intersection Observer API使用)

SENTIA
SENTIA

総合スコア1

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1回答

0グッド

0クリップ

695閲覧

投稿2022/10/31 00:57

前提

ここに質問の内容を詳しく書いてください。
スクロールに合わせた背景色の切り替え処理(Intersection Observer API使用)

実現したいこと

mainタグ内のsectionタグがスクロールにより画面内に表示された時に親要素の背景色を変更したい。
https://konocode.jp/9283/
イメージはこのリンクのような感じです。

発生している問題・エラーメッセージ

intersection Observer を使用して実装しようと考えているのですが、sectionタグが画面に表示された場合に親要素のmainタグにscssで指定している.clr_01 ~ .clr_04 までのクラス付与してsectionごとに背景色を変更したい。

該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="sanitize.css"> <link rel="stylesheet" href="style.css"> </head> <body> <header id="header"> <div class="header-list"> <h1>XXXXXX</h1> <ul class="header-sns-list"> <li class="logo"><a href="#"><img src="/image/insta.png" alt=""></a></li> <li class="logo"><a href="#"><img src="/image/twitter-white.svg" alt=""></a></li> <li class="logo"><a href="#"><img src="/image/youtube.svg" alt=""></a></li> </ul> <ul class="header-nav-list"> <li>VIDEOGRAPH</li> <li>PHOTOGRAPH</li> <li>ABOUT</li> <li>CONTACT</li> </ul> </div> <div id="video-area"> <video id="video" src="/image/adobe1.mp4" muted autoplay loop></video> </div> </header> <main id="main" class="bg-clor"> <section id="videograph" class="sec-01"> <h2 class="title">VIDEOGRAPH</h2> <ul class="video-list"> <li>XXXXX</li> <li>XXXXX</li> <li>XXXXX</li> <li>XXXXX</li> </ul> <button class="button"> <p>View All</p> <span class="icon-right"></span> <span class="icon-right after"></span> </button> </section> <section id="photograph" class="sec-02"> <h2 class="title">PHOTOGRAPH</h2> <ul class="photo-list"> <!-- 画像ポップアップ表示 --> <li>XXXXXX</li> <li>XXXXXX</li> <li>XXXXXX</li> </ul> <button class="button"> <p>View All</p> <span class="icon-right"></span> <span class="icon-right after"></span> </button> </section> <section id="about" class="sec-03"> <h2 class="title">ABOUT</h2> <div class="ab-box"> <p><small>xxxxxx</small></p> <h3>XXXXX</h3> <p class="tx-box">紹介文が入ります。紹介文が入ります。紹介文が入ります。紹介文が入ります。紹介文が入ります。紹介文が入ります。紹介文が入ります。紹介文が入ります。紹介文が入ります。紹介文が入ります。紹介文が入ります。紹介文が入ります。紹介文が入ります。紹介文が入ります。紹介文が入ります。紹介文が入ります。紹介文が入ります。</p> </div> <p class="img-face"><img src="" alt=""></p> </section> <section id="contact" class="sec-04"> <h2 class="title">CONTACT</h2> <form class="formrun"> <div class="btm30"> <table class="tblStyle_03" width="100%"> <tbody> フォーム内容 </tbody> </table> </div> <p class="subscribeBtn top40"> <button type="submit" class="btn" data-formrun-error-text="未入力の項目があります" data-formrun-submitting-text="送信中..." data-formrun-default-text="送信する">SENDING</button> </p> </form> </section> </main> <footer id="footer"> <div class="footer-bx01"> <h3>YAMASHIRO TATSUKI</h3> <p><small>videograph | photograph</small></p> </div> <div class="footer-bx02"> <ul> <li class="first ft-li">SNS</li> <li class="logo ft-li"><a href="#"><img src="/image/insta.png" alt=""></a></li> <li class="logo ft-li"><a href="#"><img src="/image/twitter-white.svg" alt=""></a></li> <li class="logo ft-li"><a href="#"><img src="/image/youtube.svg" alt=""></a></li> </ul> </div> <p class="en-nam"><small><span>©️</span><small>TATSUKI YAMASHIRO</small></small></p> </footer> <script src="/script.js"></script> </body> </html> </body>
SCSS #header{ position: relative;/*h1の中央寄せ配置の起点とするためのrelative*/ height: 100vh } #video-area{ position: fixed; z-index: -1;/*最背面に設定*/ top: 0; right:0; left:0; bottom:0; overflow: hidden; #video { /*天地中央配置*/ display: block; position: absolute; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); /*縦横幅指定*/ min-height: 100%; min-width: 100%; filter: brightness(0.4); } } #main { background-color: #222222; transition: all 1s ease; .clr_01 { background-color: #222222; transition: all 0.6s; } .clr_02 { background-color: #043848; transition: all 0.6s; } .clr_03 { background-color: #222222; transition: all 0.6s; } .clr_04 { background-color: #253355; } #videograph{ padding:100px 0; text-align: center; font-size: 1rem; max-width: 1200px; margin: 0 auto; } #photograph{ padding:100px 0 250px 0; text-align: center; font-size: 1rem; max-width: 1200px; margin: 0 auto; } #about { padding:0 0 100px 0; text-align: center; font-size: 1rem; max-width: 1200px; margin: 0 auto; } #contact { padding:100px 30px; text-align: center; font-size: 1rem; max-width: 860px; margin: 0 auto; } .formrun { text-align: left; margin: 0 auto; btm30 { .tblStyle_03 { width: 100%; tbody { display: table-row-group; } } } } }
Javascript const observer = new IntersectionObserver((entries) => { for(const e of entries) { if(e.isIntersecting) { document.getElementById('main').style.backgroundColor = '#222222'; } else { document.getElementById('main').style.backgroundColor = '#043848'; } } }); observer.observe(document.getElementById('about'))

試したこと

ovserverで該当のクラスが表示されたら直接back-groundを書き換える。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

int32_t

2022/10/31 01:07

「#about が画面内に入ったら <main> の背景色を変える」はできているのですよね。それを素直に応用すれば目的は達成できると思いますが、質問は具体的に何でしょうか。
SENTIA

2022/10/31 02:22 編集

int32_tさん 知識が浅くて申し訳ありません。 #aboutに入ると色は変わるのですが、#contactでも別の色に変えたい時に同じ色のままなので scssでクラス別で色を指定したいなと思っています。
int32_t

2022/10/31 03:16

したいことは理解できますけども、知りたいこと聞きたいことは何でしょうか。 複数のsectionをIntersectionObserverで処理する方法? 特定の section から特定のクラス名を対応させる方法? background-color ではなくクラスを変更する方法?
SENTIA

2022/10/31 03:32

int32_tさん 言葉足らずで申し訳ございません。 IntersectionObserverで監視しているsectionがViewPortに表示されると mainのクラス名を変更する方法が知りたいです。

回答1

0

ベストアンサー

mainのクラス名を変更する方法が知りたいです。

classListadd() remove() toggle() などを使うとよいでしょう。

js

1const observer = new IntersectionObserver((entries) => { 2 for (const e of entries) { 3 document.getElementById('main').classList. 4 toggle('clr_03', e.isIntersecting); 5 } 6}); 7observer.observe(document.getElementById('about'))

投稿2022/10/31 03:44

int32_t

総合スコア17085

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

SENTIA

2022/10/31 04:12

ありがとうございます! まさにこれです! #contactの時にはclr_04のクラスに変更する場合はtoggle()ではなくadd(), remove()でコードを書いた方がいいのでしょうか?
int32_t

2022/10/31 04:31 編集

toggle()のままでいいんじゃないでしょうか。コードをそのまま複製して、変数名 observer の変更、clr_03 の変更、about の変更、をすれば動きそうですよ。
SENTIA

2022/10/31 04:39

丁寧にありがとうございました! ベストアンサーにさせていただきます!

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。