バナー（スクロール量50％で表示）

※SP表示あり（デフォルト）

【オプション設定】

①一定期間バナーの再表示禁止　②フッター直前にバナーの追従を停止
※各オプションはデフォルト非設定

追加可能
パーツ		 変更可能 同一ページに
複数設置

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

×
  • バナー画像※1
  • バナーのサイズ※2
  • バナーの表示位置
     
  • バナー閉じる[×]画像※3
  • バナー閉じる[×]画像のサイズ
  • バナー閉じる[×]画像の表示位置

  • SP時表示・非表示※4

  • PC時表示・非表示※5


JS変更箇所

  • バナーのRowクラス　　　　　
    変数名：bannerSelector※①

  • 閉じる[×]クリックしてから、再度表示するまでの時間
    変数名 :cookieAction、hideDuration※②

  • フッターの直前にバナーを停止 
    変数名：footerAction、footerSelectors※③

  • スクロール量の数値
    変数名：scrollHeight

×

 ◯ 
※留意事項

※1※3：バナー画像はそれぞれご用意お願いします。
※2：画像サイズはCSSで調整可能ですが、実装後はそのサイズが固定になります。
※4：デフォルト設定では画面幅が769px以下（SP）でも表示されますが、SPで非表示も可能。その場合、バナーを格納している行（row）にクラス名「pcOnly」を追加します。
※5：バナーを格納している行（row）にクラス名「spOnly」を追加することで、PCでバナーを非表示にします。
※閉じる[×]ボタンクリック後、同一セッション内（cookieで30分指定）では再度アクセスしても表示されません。
※一度バナーを閉じた場合、他ページでバナーを入れていたとしても、同一セッション（30分間）は非表示のままになります。

【JS】
※①：バナーのRowクラスは必ず確認・入力してください。
※②：使用する場合は「cookieAction」の変数を「true」に変更します。
　　　デフォルトでは30分で設定しています。
※③：使用する場合は「footerAction」の変数を「true」に変更します。
　　　変数：footerSelectorsにフッターのクラスを入力します。
　　　フッターが１種類の場合は変数値の「.ft_hoge」はそのままにします

デモ

右下のバナーを参照ください。（スクロール量20%で表示）
デモではオプション（一定期間バナーの再表示禁止・フッター直前に停止）を設定しています。
  • ブラウザ全体の20％スクロールすると、バナーが表示されます。
  • デフォルト設定では、画面幅が769px以下（SP）でも表示されます。
     
  • オプション：一定期間バナーの再表示禁止
  • [×]ボタンでバナー非表示→1分間表示されません。1分後から表示されます。（デフォルトは30分）
  • オプション：フッター直前に停止

 

バナーを閉じる
バナー

構造図

デモのパーツの構造を説明しています。

バナー（3秒後に表示）構造図

設定方法

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

  • クラス名を見本とあわせる。

  1. バナー画像を格納する行（row）にクラス名「js-banner03_row banner03_row」の2つを追加。
  2. バナーのメイン画像にクラス名「banner03_img」を追加。
  3. バナーを閉じる[×]ボタンの画像にクラス名「js-banner03_close_img banner03_close_img」を追加。

  4. SPで非表示にしたい場合、バナーを格納している行（row）にクラス名「pcOnly」を追加。

注意点

・オプション：フッターの直前で停止を使用する場合、フッターの種類は２種類まで対応可能です。フッターの種類が３つ以上がる場合は、ユニークでJSの変更が必要になります。必ず事前にご相談ください。
・オプションはデフォルトで非設定です。
 ・オプション：一定期間バナーの再表示禁止は複数バナーに対して一律で設定されます。バナーごとに表示期間の個別設定はできません。

JS・CSS・編集画面用CSS

  • JS
  • CSS
  • 編集画面用CSS

JavaScript

JSをコピーする

2024-07-17更新（v1.0.0）

<script>
'use strict';
document.addEventListener('DOMContentLoaded', () => {

/*----------------------------------------------------------------
バナー（スクロール位置に応じて表示） START v1.0.0​​​​​
----------------------------------------------------------------*/
/*------------- 変数定義 【変更可能】 START -------------*/
const bannerSelector = '.js-banner03_row'; /* バナーのRowクラス */
const cookieAction = false; /* 一定時間バナー非表示（ON：true） */
const hideDuration = 30 * 60 * 1000; /* バナー非表示期間（30分） */
const footerAction = false; /* フッターの手前でバナーを停止（ON：true） */
const footerSelectors = ['.ft_custom01', '.ft_hoge']; /* フッタークラス（2種類目未入力可） */
const scrollHeight = 0.5; /* スクロール量（50%） */
/*------------- 変数定義 【変更可能】 END -------------*/

const banner03Row = document.querySelector(bannerSelector);
const banner03CloseButton = document.querySelector('.js-banner03_close_img img');
const bodyHeight = document.body.scrollHeight;

/* ---------------------------
一定期間バナーの再表示を禁止
--------------------------- */
/* クッキー設定関数 */
function setCookie(name, value, minutes) {
const date = new Date();
date.setTime(date.getTime() + (minutes * 60 * 1000));
const expires = "expires=" + date.toUTCString();
document.cookie = name + "=" + value + ";" + expires + ";path=/";
}

/* クッキー取得関数 */
function getCookie(name) {
const nameEQ = name + "=";
const ca = document.cookie.split(';');
for(let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}

/* ---------------------------
ページ全体の20%をスクロールしたらバナーを表示
--------------------------- */
const displayBanner = () => {
if (cookieAction) {
const lastClosedTime = getCookie('bannerLastClosedTime');
const currentTime = new Date().getTime();
if (lastClosedTime && (currentTime - lastClosedTime) < hideDuration) {
return;
}
}
const scroll = window.scrollY;
if (scroll > bodyHeight * scrollHeight && !banner03Row.classList.contains('-closed')) {
banner03Row.classList.add('-visible');
} else {
banner03Row.classList.remove('-visible');
}
};

banner03CloseButton.addEventListener('click', () => {
if (banner03Row.classList.contains('-visible')) {
banner03Row.classList.remove('-visible');
banner03Row.classList.add('-closed');
if (cookieAction) {
setCookie('bannerLastClosedTime', new Date().getTime(), hideDuration / (60 * 1000));
}
}
});

/* -------------------------------
フッター上でバナーを停止
------------------------------- */
const controlBannerNearFooter = () => {
const footers = footerSelectors.map(selector => document.querySelector(selector)).filter(Boolean);
const banner = banner03Row;
if (footers.length === 0 || !banner) {
return;
}
const initialBottom = parseInt(window.getComputedStyle(banner).bottom, 10);
const checkBannerPosition = () => {
if (window.getComputedStyle(banner).display === 'none') {
return;
}
const windowHeight = window.innerHeight;
const scrollY = window.scrollY || window.pageYOffset;
footers.forEach(footer => {
const footerRect = footer.getBoundingClientRect();
if (scrollY + windowHeight - initialBottom > footerRect.top + scrollY) {
const newBottom = windowHeight - footerRect.top;
banner.style.bottom = `${newBottom + 10}px`;
} else {
banner.style.bottom = `${initialBottom}px`;
}
});
};
window.addEventListener('scroll', checkBannerPosition);
window.addEventListener('resize', checkBannerPosition);
checkBannerPosition();
const observer = new MutationObserver(() => {
checkBannerPosition();
});

observer.observe(banner, { attributes: true, attributeFilter: ['style', 'class'] });
};

window.addEventListener('scroll', displayBanner);
if (footerAction) {
controlBannerNearFooter();
}
/*----------------------------------------------------------------
バナー（スクロール位置に応じて表示） END
----------------------------------------------------------------*/
});
</script>

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

CSSをコピーする

2024-06-25更新（v1.0.0）

/*----- バナー（閉じるボタンクリック後、同一セッション内では非表示） START v1.0.0​​​​​-----*/
//セクション・共通フッター共に使用できるよう、rowから紐づけ
.row {
&.banner03_row {
display: none;
max-width: 300px;
position: fixed;
right: 20px;
bottom: 100px;
z-index: 1000;
margin: 0;
@include breakpoint-sp {
max-width: 200px;
bottom: 70px;
}
//表示
&.-visible {
display: block;
}
// 非表示
&.-closed {
display: none;
}
.col {
padding: 0;
.component {
&.image {
margin: 0;
&.banner03_close_img {
width: auto;
position: absolute;
top: -35px;
right: 0;
z-index: 2;
img {
cursor: pointer;
max-width: 30px !important;
}
}
&.banner03_img {
a {
img {
&:hover {
opacity: 1;
}
}
}
}
}
}
}
}
}
/*----- バナー（閉じるボタンクリック後、同一セッション内では非表示） END -----*/

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

CSSをコピーする

2024-06-25更新（v1.0.0）

/*----- バナー（閉じるボタンクリック後、同一セッション内では非表示） 編集画面用 START v1.0.0​​​​​-----*/
&.banner03_row {
display: block;
max-width: initial;
margin: 20px auto;
position: relative;
right: initial;
bottom: initial;
z-index: initial;
border: 1px solid #000;
&::before {
content: "追従バナー";
background: #000;
color: #fff;
position: absolute;
top: -24px;
right: 0;
padding: 0 5px;
}
.col {
.component {
&.image {
&.banner03_close_img {
width: 100%;
position: relative;
top: initial;
right: initial;
z-index: initial;
margin-bottom: 10px;
img {
cursor: initial;
}
}
}
}
}
}
/*----- バナー（閉じるボタンクリック後、同一セッション内では非表示） 編集画面用 END -----*/
JSパーツ集ロゴ

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

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

      はい
      いいえ
      ページトップへ戻る

      © Basic Inc. All Rights Reserved.