背景色ふわっと切り替え
ウィンドウ画面内に入ったら背景色がふわっと切り替わる
| 追加可能パーツ | 変更可能箇所 | 変更NG箇所 | 同一ページ に複数設置 |
ページ複製・ クリップボード使用可否 |
|---|---|---|---|---|
|
- |
|
|
〇 | 〇 |
背景色ふわっと切り替え デモ01
見出しが入ります。
テキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
見出しが入ります。
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
見出しh2
見出しが入ります。
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
見出しが入ります。
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
背景色ふわっと切り替え デモ02
サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。
機能１の見出し（h3）
機能２の見出し（h3）
機能3の見出し（h3）
設定方法
- CSSをカスタムCSSに記述。
- JavaScriptを使用したいパーツのセクションの一番下に配置。複数ページ設置する場合は共通フッターに配置。
- クラス名を見本とあわせる。
- 背景色を切り替せたセクションにクラス名「js-bg-change」を追加。
- デフォルトでは背景切り替えと同時に文字色が白になるように設定しているため、行（row）の背景色を白などに設定していて中の要素の文字色を変えたくない場合は、各自でカスタムCSSにて調整してください。
※例として「column02_row」の中の要素が白文字にならないように設定しています。不要であれば削除してください。
※切り替え後の[背景色/文字色]はカスタムCSSで変更可能。
- 新CMSの場合：基本デザインパーツ（セクションパーツ、複合パーツ、単体パーツ）を使用して問題ありません。
注意点
- セクションのみ対応
JS・CSS
- JS
- CSS
2022-01-25更新（v1.0.0）
<script>
'use strict';
/* -----------------------
背景色ふわっと切り替え v1.0.0
----------------------- */
document.addEventListener('DOMContentLoaded', function () {
/*------------- 変数定義 【変更可能】 START -------------*/
let scrollBgChange = document.querySelectorAll('.js-bg-change');/* 監視対象要素 */
/*------------- 変数定義 【変更可能】 END -------------*/
if ('IntersectionObserver' in window) {
/* オプション */
const options = {
root: null,/* viewport（ブラウザの画面全体）を交差監視対象とする */
rootMargin: '-70% 0px -30%',/* 「root要素に設けるmargin」と「対象」が交差したらイベントを発火 */
threshold: 0/* 対象がどの程度の割合交差した場合に実行するか */
};
/* 監視対象要素がスクロール範囲に入ったら実行 */
const observer2 = new IntersectionObserver(doWhenIntersect2, options);
function doWhenIntersect2(entries) {
entries.forEach((entry) => {
let object = entry.target;
if (entry.isIntersecting) {
/* 交差し始めた要素の挙動 */
object.classList.add('is-change');/* 交差範囲内に入ったらクラス「is-change」をつける */
} else {
/* 交差し終えた要素の挙動 */
object.classList.remove('is-change');/* 交差範囲内から外れたらクラス「is-change」を外す */
}
});
}
/* 監視対象要素の監視をスタート */
scrollBgChange.forEach(function (object) {
observer2.observe(object);
});
}
});
/* -----------------------
背景色ふわっと切り替え END
----------------------- */
</script>
CSS内にデフォルトで用意されている、「JSパーツ集記述場所」の中に追加してください。
※アップセル等で見つからない場合は、LP記述欄の下などに入れてください。
2023-07-24更新（v1.0.0）
/*----- 背景色ふわっと切り替え START v1.0.0-----*/
.theme-fo-base .wrapper .contents {
:is(section,section[data-designpart-id]:not(:root:root:root:root)) {
&.js-bg-change {
transition: color 800ms;
transition: background 800ms;
&.is-change {
background: #333 !important;//切り替え後の背景色
color: #fff !important;//切り替え後の文字色
em,span {
color: inherit !important;
}
.inner {
.row {
.col {
.component {
&.heading {
:is(h1,h2,h3,h4,h5) {
// 見出しのみ効かない為個別で指定
color: #fff !important;
}
}
&.richtext {
color: #fff !important;
}
}
}
// 不要であれば削除（白文字にしたくない要素）
&.column02_row {//クラス名は適宜変更
.col {
.component {
&.heading {
:is(h1,h2,h3,h4,h5) {
color: #2d2d2d !important;
}
}
&.richtext {
color: #333 !important;
}
}
}
}
}
}
}
}
}
}
/*----- 背景色ふわっと切り替え END -----*/
© Basic Inc. All Rights Reserved.