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

[ ID : 9283 ]
シルバー
【Vanilla JS】スクロールに合わせた背景色の切り替え処理(Intersection Observer API使用)
実装目安
3分

概要

スクロールをして対象の要素が画面上部に到達したタイミングで、body要素の背景色を変更する処理をJavaScriptで実装。

用途・要件

  • 監視対象の要素に対して、「data-bg-color=”#007bbb”」のようにdata属性に背景色を設定する。
  • スクロールして監視対象の要素が画面上部に到達したタイミングで設定した背景色に変更される。cssのtransitionを設定する事で、フワッと色が切り替わる。
  • 本記事ではbody要素の背景色を切り替えている。
  • scroll、reseizeイベントを使用せず、Intersection Observer APIを使用。(ブラウザへの負荷が少ない)

検証ブラウザ

  • Google Chrome(最新)
  • Safari(最新)
  • Firefox(最新)
  • Microsoft Edge(最新)

注意事項

  • DEMOプレビューで正常に動作しないためDEMOは表示しておりません。ソースコードをローカル環境に移設して動作確認をしてください。

実装

このコンテンツの続きを閲覧するにはログインが必要です。 新規会員登録

この記事をシェアする

関連記事

全ての記事を見る

KONOCODEのメリット 無料会員登録