JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

テーブル

グラフ

背景

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

openBD

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptの.addEventListener でフローティングバナーの表示・非表示

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

.addEventListener

JavaScriptの.addEventListener でフローティングバナーの表示・非表示

JavaScriptの.addEventListener でフローティングバナーの表示・非表示

主に広告で使いそうで、日常的な実用性がなくCSSメインの為JavaScriptなのかは微妙なところですが、ごく簡単なコードで実装できるフローティングバナーです。

簡単なコードでできているスニペットなので、JavaScript初学者の方はコードの意味や全体感を掴む為にはいいかもしれません。

そんなスニペットですが、最後までご覧いただけたら嬉しいです。

.addEventListener

JavaScriptの .addEventListener は、指定した要素のイベント毎に呼び出される関数を設定するメソッドです。

document.getElementById('element').addEventListener('click', () => {
// ここに処理内容
});
かかかず
かかかず

めちゃめちゃ便利なメソッドです。

設定できる「イベント」は色々あります。

フローティングバナーのサンプル

早速サンプルです。

デスクトップでこの記事をご覧いただくと、画面の右下に固定で動画のバナーが表示されます。バナーの中の「✖️」をクリックすると、バナーが非表示になります。

×
かかかず
かかかず

動画でも実際の表示例が確認できるので、あわせてチェックしてみてください。

実装の手順と方法

手順と方法

コードの解説の前に、実装の手順と方法について解説します。

HTMLを記述

まずはじめに、設置したい表示したい場所へコードを記述します。

<div id="calloutElm">
  <span id="closeButton" class="closebtn">×</span>
  <div class="callout-container">
    <video src="https://dubdesign.net/wp-content/uploads/2022/06/3609_640x360.mov" autoplay muted loop></video>
  </div>
</div>
JavaScriptを記述

次に、JavaScriptでSwiperのオプションを記述します。

コードは <body>〜</body>で、</body> の閉じタグ(クロージングタグ)の前に記述しましょう。

document.getElementById('closeButton').addEventListener('click', () => {
const elm = document.getElementById('calloutElm');
elm.style.display='none';
});

CSSを記述

最後にCSSを記述して、見た目を整えます。

#calloutElm {
  position: fixed;
  bottom: 35px;
  right: 20px;
  max-width: 300px;
  z-index: 4;
}
.callout-container video {
    width: 100%;
}
.closebtn {
    position: absolute;
    top: -5px;
    right: 5px;
    color: white;
    font-size: 30px;
    padding: 10px;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
}

.closebtn:hover {
  color: lightgrey;
}

ざっくりとしたコードの解説

コードは、HTML・JavaScript・CSSの3種類です。順に解説していきます。

HTML

HTMLは「calloutElm」のid名で全体のオブジェクトを作り、その中に非表示のトリガーになる「✖️」や、バナーの画像や動画を中に入れるシンプルな構造です。

<div id="calloutElm">
  <span id="closeButton" class="closebtn">×</span>
  <div class="callout-container">
    <video src="https://dubdesign.net/wp-content/uploads/2022/06/3609_640x360.mov" autoplay muted loop></video>
  </div>
</div>
かかかず
かかかず

動画をフローティングバナーの中に入れてます。

JavaScript

JavaScriptは、.addEventListener のクリックで、フローティングバナーの「✖️」をクリックすると style.display='none'; で非表示になる簡単なコードです。

document.getElementById('closeButton').addEventListener('click', () => {
const elm = document.getElementById('calloutElm');
elm.style.display='none';
});

CSS

CSSは「calloutElm」のid名が付く div タグを position:fixed; でフローティングさせます。その中の「closeButton」のid名が付く span タグが非表示の「✖️」です。

#calloutElm {
  position: fixed;
  bottom: 35px;
  right: 20px;
  max-width: 300px;
  z-index: 4;
}
.callout-container video {
    width: 100%;
}
.closebtn {
    position: absolute;
    top: -5px;
    right: 5px;
    color: white;
    font-size: 30px;
    padding: 10px;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
}

.closebtn:hover {
  color: lightgrey;
}

さいごに

この記事では、style.display='none'; で非表示へ切り替えていますが、classの付け替えでも非表示は可能です。

この辺りは自分の管理しやすい方で、設定してみてください。