×をクリック（タップ）すると閉じるフローティングバナー（追従バナー）をJavaScriptで実装してみる（備忘録）

/1 コメント/カテゴリ: , , , /作成者:

今回はJavaScriptを用いて、×をクリック（タップ）すると閉じるフローティングバナー（追従バナー）を実装してみる。

よくページをPCやスマホで閲覧していてスクロールしているとき、位置が固定されたまま画面上についてくる画像やボタンなどを見たことがないだろうか。

これがいわゆるフローティングバナー（追従バナー）と呼ばれている。

最近はいろんな広告にも用いられるようになっているので、うざったいと感じている人もいるかもしれない。

だが、商品をPRして買ってもらう手段とか、最終的に辿りついていただきたいページの導線手段として用いるには、比較的効果が高いといわれている。

個人的にはあまり好きではないが、効果が高いという結果が出ているのであれば、積極的に使っていくのがいいだろう。

もちろん、最新の動向は積極的にキャッチアップしていくことを忘れてはいけない。いつかは廃れるものなのだと頭の片隅においておくといいかと思う。

デモでは、右下にフローティングバナー（追従バナー）を設置した。

しかし、目的やデバイスなどさまざまな要因によって、フローティングバナー（追従バナー）を掲載する位置や方法などが変わってくるので、いろんなページをみてどういったものがあっているのかは取捨選択していくといいだろう。

demo

それでは解説に入っていく。

HTMLの記述について

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>フローティングバナー（追従バナー）</title>
  <link rel="stylesheet" href="../reset.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
    <div class="bl_floatingBanner">
      <a href="" class="bl_floatingBanner_img"><img src="img_floating.jpg" alt=""></a>
      <div class="bl_floatingBanner_close" id="js_floatingBanner_close">
        <span></span>
        <span></span>
      </div>
    </div>
    <section>
      <div class="ly_mainvisual">
        <img src="img_mainvisual.jpg" alt="MV">
      </div>
    </section>
    <section>
      <div class="ly_inner" id="menu1">
        <h2>menu1</h2>
        <div class="md_textblock">
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
        </div>
      </div>
    </section>
    <section>
      <div class="ly_inner" id="menu2">
        <h2>menu2</h2>
        <div class="md_textblock">
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
        </div>
      </div>
    </section>
    <section>
      <div class="ly_inner" id="menu3">
        <h2>menu3</h2>
        <div class="md_textblock">
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
        </div>
      </div>
    </section>
    <section>
      <div class="ly_inner" id="menu4">
        <h2>menu4</h2>
        <div class="md_textblock">
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
        </div>
      </div>
    </section>
    <section>
      <div class="ly_inner" id="menu5">
        <h2>menu5</h2>
        <div class="md_textblock">
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
        </div>
      </div>
    </section>
  </main>
  <script src="style.js"></script>
</body>
</html>

今回のフローティングバナー（追従バナー）の記述は下記部分になる。

<div class="bl_floatingBanner">
  <a href="" class="bl_floatingBanner_img"><img src="img_floating.jpg" alt=""></a>
  <div class="bl_floatingBanner_close" id="js_floatingBanner_close">
    <span></span>
    <span></span>
  </div>
</div>

bl_floatingBannerで全体を括り、その子要素にリンク付きのバナーbl_floatingBanner_imgを記述、また×（閉じる）を作るためのbl_floatingBanner_closeを記述している。空要素のspanは×の線を作るために記述している。

そして、×部分にid（js_floatingBanner_close）を設定しているのは、JavaScript側でidを取得するためである。これにより×をクリック（

そして、×部分にid（js_floatingBanner_close）を設定しているのは、JavaScript側でidを取得するためである。これにより×をクリック（タップ）したときに任意のクラスを付与する設定などができるようになる。

CSSの記述について

@charset "utf-8";

/* ==========================
  初期設定
========================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
img {
  width: 100%;
}

/* ==========================
  フローティングバナー（追従バナー）
========================== */
.bl_floatingBanner {
  position: fixed;
  bottom: 0;
  right: 10px;
  width: 150px;
  max-width: 100%;
}
.bl_floatingBanner.js_close {
  display: none;
}
.bl_floatingBanner_img {
  display: block;
  transition: 0.3s;
}
.bl_floatingBanner_img:hover {
  opacity: 0.6;
}
.bl_floatingBanner_close {
  width: 15px;
  height: 15px;
  position: absolute;
  right: 0;
  top: -15px;
  cursor: pointer;
}
.bl_floatingBanner_close span:nth-of-type(1) {
  position: absolute;
  top: 7px;
  right: 0;
  width: 15px;
  height: 1px;
  background-color: #000;
  transform: rotate(45deg);
}
.bl_floatingBanner_close span:nth-of-type(2) {
  position: absolute;
  top: 0;
  right: 7px;
  width: 1px;
  height: 15px;
  background-color: #000;
  transform: rotate(45deg);
}

/* ==========================
  コンテンツの中身
========================== */
.ly_inner {
  width: 100%;
  max-width: 1080px;
  margin: 100px auto;
  padding: 20px;
  background-color: #ccc;
}
.ly_inner h2 {
  font-size: 150%;
  font-weight: bold;
  margin-bottom: 30px;
}
.md_textblock > * + * {
  margin-top: 10px;
}

フローティングバナー（追従バナー）をスクロールしても固定させたいので、positionをfixedで指定。

あとはバナーの幅を指定し、置きたい位置にtopやbottom、rigtht、leftなどを使って調整する。

あとは任意で画像にホバーアクションをつけ、×をCSSで作成（今回は背景で作成）すればOKだ。

ちなみに下記の記述部分は、×をクリック（タップ）したときに、バナーが削除されるようにするために記述している。

.bl_floatingBanner.js_close {
  display: none;
}

×の作成方法は以前、いろんな記事で紹介されているので解説は省略したい。そこまで難しくないので、コードから読み取っていただければと思う。

JavaScriptの記述について

'use strict';

// ×をクリックするとフローティングバナー（追従バナー）が閉じる
window.onload = function () {
  document.getElementById("js_floatingBanner_close").onclick = function () {
    this.parentNode.classList.add('js_close');
  };
}

HTML上のjs_floatingBanner_closeのidが記述されている場所をクリックしたときに、その親要素のbl_floatingBannerが記述されている場所に対して、js_closeというクラスが付与されるように設定している。

JavaScriptのthisはjs_floatingBanner_closeのことを指しており、parentNodeはjs_floatingBanner_closeの場所から親要素を辿り、classList.addは任意のクラスを追加できるようになっている。

あとはCSS側でjs_closeが追加された時の対応を記述すればOKだ。今回は×がクリック（タップ）されたら削除したいので、displayをnoneにした。

以上で実装完了だ。

1 返信

トラックバック & ピングバック

  1. スクロール時にfooter部分で止まるフローティングバナー（追従バナー）をJavaScriptで実装してみる（備忘録） – freefuntimes より:
    2022年2月9日 7:51 PM

    […] 前回の記事はこちら […]

コメントはクローズされています。