ふわっとフェードイン

要素がウィンドウ画面内に入ったらふわっとフェード＆スライドインする
※SPでは無効化

追加可能パーツ	変更可能箇所	同一ページに複数設置	ページ複製・クリップボード使用可否
基本どのパーツでも可^_※1	要素がフェードインする方向（その場/上/下/右/左） JS変更箇所フェードイン時の速さ^_※① フェードイン時のスクロール量^_※② SP時の挙動	〇	〇

追加可能
パーツ

変更可能箇所

同一ページ
に複数設置

ページ複製・
クリップボード使用可否

基本どのパーツでも可^_※1

要素がフェードイン
する方向（その場/上/下/右/左）

JS変更箇所

フェードイン時の速さ^_※①
フェードイン時のスクロール量^_※②
SP時の挙動

〇

※留意事項
※1：component単位〜から可能。クラスの付与ができないパーツは不可になります。（一文字ずつフェードインなど×）【JS】 ※①：デフォルトの表示速度は0.8秒です。 ※②：デフォルトのスクロール量は100pxです。

※留意事項

※1：component単位〜から可能。クラスの付与ができないパーツは不可になります。（一文字ずつフェードインなど×）

【JS】
※①：デフォルトの表示速度は0.8秒です。
※②：デフォルトのスクロール量は100pxです。

アンカーリンクチェック

その場からフェードイン

テキスト文章が入ります。テキスト文章が入ります。テキスト文章が入ります。テキスト文章が入ります。テキスト文章が入ります。テキスト文章が入ります。テキスト文章が入ります。

課題解決のアンサー見出し（h3）

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

課題解決のアンサー見出し（h3）

選ばれる理由

下から上にフェードイン

課題解決のアンサー見出し（h3）

課題解決のアンサー見出し（h3）

選ばれる理由

上から下にフェードイン

課題解決のアンサー見出し（h3）

課題解決のアンサー見出し（h3）

選ばれる理由

左からフェードイン

課題解決のアンサー見出し（h3）

課題解決のアンサー見出し（h3）

選ばれる理由

右からフェードイン

課題解決のアンサー見出し（h3）

課題解決のアンサー見出し（h3）

選ばれる理由

設定方法

CSSをカスタムCSSに記述。
編集画面用CSSをカスタムCSSに記述。
JavaScriptを使用したいパーツのセクションの一番下に配置。複数ページで使用する場合は共通フッターに配置。
クラス名を見本とあわせる。

ふわっとフェードインさせたいパーツに下記クラス名を用途に合わせて追加。（基本は行（row）に付与するのがおすすめ）
- 下から上にフェードイン→「fade-up」
- 上から下にフェードイン→「fade-down」
- 左からフェードイン→「fade-left」
- 右からフェードイン→「fade-right」

新CMSの場合：基本デザインパーツ（セクションパーツ、複合パーツ、単体パーツ）を使用して問題ありません。

カスタムCSS

CSS内にデフォルトで用意されている、「JSパーツ集記述場所」の中に追加してください。
※アップセル等で見つからない場合は、LP記述欄の下などに入れてください。

2023-08-23更新（v1.0.0）

CSSをコピーする

/----- ふわっとフェード v1.0.0-----/
:is(
.fade-up,
.fade-down,
.fade-left,
.fade-right,
) {
@include breakpoint-pc {
opacity: 0;//読み込み時ちらつき防止
}
}
/----- ふわっとフェード END -----/

編集画面用カスタムCSS

編集画面CSS内にデフォルトで用意されている、「//JSパーツの記述はここにお願いします」の中に追加してください。
※アップセル等で見つからない場合は、@include edit-page {}内に必ず入れてください。

2023-08-23更新（v1.0.0）

CSSをコピーする

/-- ふわっとフェード編集画面用 START v1.0.0--/
:is(
.fade-up,
.fade-down,
.fade-left,
.fade-right,
) {
opacity: 1;//読み込み時ちらつき防止
}
/-- ふわっとフェード編集画面用 END --/

①jQueryを設定

JavaScript埋め込みパーツを設置し、CDNで読み込んだ最新バージョンのjQueryを反映させます。
※jQueryコンフリクト回避のため

複数のJSパーツを使用する場合は、こちらの①jQueryの読み込みは一度だけで大丈夫です。

2024-01更新（v1.0.0）

JavaScriptをコピーする

<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
<script>
'use strict';
/--- jQueryコンフリクト回避 v1.0.0---/
jQuery.noConflict();

/--- この下にJavaScriptを記述していく---/
</script>

②JavaScript

①の下に新規でJavaScript埋め込みパーツを設置し、コピー＆ペーストします。

2024-05-02更新（v1.0.0）

JavaScriptをコピーする

<script>
/* ---------------------------
ふわっとフェード v1.0.0
--------------------------- /
/ function()で囲むと「loadメソッド」によるsafariの読み込みバグが発生するため、モジュール化なし（他のJSパーツと併用する場合は変数・関数がかぶらないように注意） /
/---------------------------------
変数定義【変更可能】 START
---------------------------------/
const offset_bottom = 100; / 画面下からどの位置でフェードインさせるか(px) /
const spMoveFlag = false; / SP時にフェードインする場合は「 true 」、しない場合は「 false 」 /
/------------- デフォルトフェードイン -------------/
const fade_time = 800; / フェードの時間(ms) /
/------------- 下から上にフェードイン -------------/
const fade_up_move = 100; / どのぐらい要素を動かすか(px) /
const fade_up_time = 800; / フェードの時間(ms) /
/------------- 上から下にフェードイン -------------/
const fade_down_move = 100; / どのぐらい要素を動かすか(px) /
const fade_down_time = 800; / フェードの時間(ms) /
/------------- 左からフェードイン -------------/
const fade_left_move = 100; / どのぐらい要素を動かすか(px) /
const fade_left_time = 800; / フェードの時間(ms) /
/------------- 右からフェードイン -------------/
const fade_right_move = 100; / どのぐらい要素を動かすか(px) /
const fade_right_time = 800; / フェードの時間(ms) /
/---------------------------------
変数定義【変更可能】 END
---------------------------------/

/--- PC or SP　判定 ---/
function windowPCorSP() {
if (window.matchMedia('(min-width: 770px)').matches) {
/ 画面幅が770px以上のときの処理(PC) /
return 'pc';
} else {
/ 画面幅が769px以下のときの処理(SP) /
return 'sp';
}
}

/------------- デフォルトフェードインフェード前のcssを定義 -------------/
function fadeSetUp() {
jQuery('.fade').css({
opacity: 0,
transition: `${fade_time}ms`,
});
};

function fade(scroll_top, scroll_bottom, fade_position) {
jQuery('.fade').each(function () {
const this_position = jQuery(this).offset().top;
if (fade_position > this_position) {
jQuery(this).css({
opacity: 1,
transform: 'none',
});
}
});
}

/------------- 下から上にフェードインフェード前のcssを定義 -------------/
function fadeUpSetUp() {
jQuery('.fade-up').css({
opacity: 0,
transform: `translateY(${fade_up_move}px)`,
transition: `${fade_up_time}ms`,
});
};

function fadeUp(scroll_top, scroll_bottom, fade_position) {
jQuery('.fade-up').each(function () {
const this_position = jQuery(this).offset().top;
if (fade_position > this_position) {
jQuery(this).css({
opacity: 1,
transform: 'translateY(0)',
});
}
});
}

/------------- 上から下にフェードインフェード前のcssを定義 -------------/
function fadeDownSetUp() {
jQuery('.fade-down').css({
opacity: 0,
transform: `translateY(${-fade_down_move}px)`,
transition: `${fade_down_time}ms`,
});
};

function fadeDown(scroll_top, scroll_bottom, fade_position) {
jQuery('.fade-down').each(function () {
const this_position = jQuery(this).offset().top;
if (fade_position > this_position) {
jQuery(this).css({
opacity: 1,
transform: 'translateY(0)',
});
}
});
}

/------------- 左からフェードインフェード前のcssを定義 -------------/
function fadeLeftSetUp() {
jQuery('.fade-left').css({
opacity: 0,
transform: `translateX(${-fade_left_move}px)`,
transition: `${fade_left_time}ms`,
});
}

function fadeLeft(scroll_top, scroll_bottom, fade_position) {
jQuery('.fade-left').each(function () {
const this_position = jQuery(this).offset().top;
if (fade_position > this_position) {
jQuery(this).css({
opacity: 1,
transform: 'translateX(0)',
});
}
});
}

/------------- 右からフェードインフェード前のcssを定義 -------------/
function fadeRightSetUp() {
jQuery('.fade-right').css({
opacity: 0,
transform: `translateX(${fade_right_move}px)`,
transition: `${fade_right_time}ms`,
});
}

function fadeRight(scroll_top, scroll_bottom, fade_position) {
jQuery('.fade-right').each(function () {
const this_position = jQuery(this).offset().top;
if (fade_position > this_position) {
jQuery(this).css({
opacity: 1,
transform: 'translateX(0)',
});
}
});
}

/ スクロールまたはロードするたびに実行 /
function windowScrollFadeIn() {
jQuery(window).on('scroll load', function () {
const scroll_top = jQuery(this).scrollTop();
const scroll_bottom = scroll_top + jQuery(this).height();
const fade_position = scroll_bottom - offset_bottom;

fade(scroll_top, scroll_bottom, fade_position);
fadeUp(scroll_top, scroll_bottom, fade_position);
fadeDown(scroll_top, scroll_bottom, fade_position);
fadeLeft(scroll_top, scroll_bottom, fade_position);
fadeRight(scroll_top, scroll_bottom, fade_position);
});
}

/--- ウィンドウのリサイズ完了後の処理 ---/
const windowResize = () => {
let timer = 0;
let delay = 200;
window.addEventListener(
'resize',
() => {
clearTimeout(timer);
timer = setTimeout(() => {
if ( windowPCorSP() === 'pc' ) {
windowScrollFadeIn();
} else if ( windowPCorSP() === 'sp' && spMoveFlag ) {
windowScrollFadeIn();
}
}, delay);
},
false
);
};

if ( windowPCorSP() === 'pc') {
fadeSetUp();
fadeUpSetUp();
fadeDownSetUp();
fadeLeftSetUp();
fadeRightSetUp();
windowScrollFadeIn();
} else if ( windowPCorSP() === 'sp' && spMoveFlag ) {
fadeSetUp();
fadeUpSetUp();
fadeDownSetUp();
fadeLeftSetUp();
fadeRightSetUp();
windowScrollFadeIn();
}
/ ---------------------------
ふわっとフェード END
--------------------------- */
</script>

JSが必要な実装の注意点スプレッドシート（H列）は読みましたか？

※必ず注意点（H列）をご確認の上閲覧ください

はい

いいえ