JavaScriptでスクロール時にフッター横からバナーを表示する方法とポップアップバナーを表示する方法

Posted on by

JavaScriptを使って、ウェブサイトのユーザー体験を向上させるためのバナー表示方法を2つ紹介します。
スクロールに連動してフッター横からバナーを表示する方法と、
ポップアップでバナーを表示する方法です。それぞれの手順とサンプルコードを詳しく解説します。

スクロールするとフッター横からバナーを表示する方法

概要

ユーザーがページをスクロールすると、特定の位置に達したときに
フッターの横からバナーがスライドインして表示されるようにします。
これにより、ユーザーの目に留まりやすい位置にバナーを配置できます。

手順

HTMLの準備

フッターとバナーの基本的なHTML構造を作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>フッター横バナー</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    .footer {
      position: relative;
      background: #f1f1f1;
      padding: 20px;
      text-align: center;
      height: 200px; /* デモのために高さを指定 */
    }
    .banner {
      position: fixed;
      bottom: 0;
      right: -300px; /* 初期状態は画面外 */
      width: 250px;
      background: #ff9800;
      color: #fff;
      padding: 20px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      transition: right 0.5s;
    }
    .banner.visible {
      right: 20px; /* 表示時の位置 */
    }
  </style>
</head>
<body>

<div class="content">
  <p>ここにコンテンツが入ります。ページをスクロールしてください。</p>
  <p>もっとコンテンツが必要です。スクロールできるように多めにテキストを入れましょう。</p>
  <!-- 適当にコンテンツを追加 -->
  <p style="height: 2000px;">さらに多くのコンテンツ...</p>
</div>

<div class="footer">
  フッターコンテンツ
</div>

<div class="banner" id="footerBanner">
  ここにバナーの内容が入ります。
</div>

<script>
  window.addEventListener('scroll', function() {
    var banner = document.getElementById('footerBanner');
    var footer = document.querySelector('.footer');
    var footerRect = footer.getBoundingClientRect();
    
    if (footerRect.top < window.innerHeight) {
      banner.classList.add('visible');
    } else {
      banner.classList.remove('visible');
    }
  });
</script>

</body>
</html>

解説

HTML

フッターとバナーの基本的なHTMLを用意します。バナーは初期状態では画面の右外に配置されます。

CSS

バナーの初期位置を右外に設定し
、.visible クラスを適用すると右側にスライドインするようにトランジションを設定します。

JavaScript

ページのスクロールイベントを監視し、フッターが画面内に入ったらバナーを表示する処理を行います。

スクロールするとポップアップでバナーを表示する方法

概要

ユーザーがページを一定量スクロールしたときに、画面の中央にポップアップバナーを表示します。
ポップアップはユーザーの注意を引くための効果的な方法です。

手順

HTMLの準備

ポップアップバナーの基本的なHTML構造を作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ポップアップバナー</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    .popup-banner {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 300px;
      background: #4caf50;
      color: #fff;
      padding: 20px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      display: none;
      z-index: 1000;
    }
    .popup-banner.visible {
      display: block;
    }
    .close-btn {
      background: #f44336;
      border: none;
      color: #fff;
      padding: 5px 10px;
      cursor: pointer;
      float: right;
    }
  </style>
</head>
<body>

<div class="content">
  <p>ここにコンテンツが入ります。ページをスクロールしてください。</p>
  <p>もっとコンテンツが必要です。スクロールできるように多めにテキストを入れましょう。</p>
  <!-- 適当にコンテンツを追加 -->
  <p style="height: 2000px;">さらに多くのコンテンツ...</p>
</div>

<div class="popup-banner" id="popupBanner">
  <button class="close-btn" id="closeBtn">閉じる</button>
  ここにポップアップバナーの内容が入ります。
</div>

<script>
  window.addEventListener('scroll', function() {
    var popupBanner = document.getElementById('popupBanner');
    var scrollPosition = window.scrollY || window.pageYOffset;
    
    if (scrollPosition > 1000) { // スクロール量が1000pxを超えたら表示
      popupBanner.classList.add('visible');
    }
  });

  document.getElementById('closeBtn').addEventListener('click', function() {
    document.getElementById('popupBanner').style.display = 'none';
  });
</script>

</body>
</html>

解説

HTML

ポップアップバナーの基本的なHTML構造を用意します。バナーには閉じるボタンも含めます。

CSS

ポップアップバナーの初期状態を非表示に設定し、
.visible クラスが適用されると表示されるようにします。

JavaScript

ページのスクロールイベントを監視し、スクロール位置が一定量を超えた場合に
ポップアップバナーを表示します。
閉じるボタンがクリックされると、バナーを非表示にします。

まとめ

これらの方法を使用することで、ユーザーのスクロール動作に連動してバナーを表示することができます。
フッター横からスライドインするバナーは、
画面の隅に目立たない形で表示しつつユーザーの注意を引く効果があり、
ポップアップバナーはユーザーの視線を強く引きつける効果があります。

それぞれの方法を用途やデザインに合わせて活用し、
ユーザー体験を向上させるバナー表示を実現しましょう。