フェードイン・フェードアウトで表示するポップオーバーの作り方【HTML/CSS/JavaScript・サンプルコード付き】

ポップオーバー

フェードイン・フェードアウトで表示するポップオーバーの作り方

フェードイン・フェードアウトで表示するポップオーバーの作り方を紹介します。このサンプルでは、ボタンをクリックすると補足情報を表示するポップオーバーが、ゆっくりフェードインしながら表示されます。もう一度ボタンをクリックすると、フェードアウトしながら自然に非表示になるため、急な表示切り替えがなく、落ち着いた印象のUIを実装できます。HTML・CSS・JavaScriptだけで動作し、外部ライブラリは使用しません。

お問い合わせ画面の入力補足、会員サイトの操作説明、管理画面の設定ガイド、ECサイトの商品情報や配送に関する補足など、必要な情報だけをコンパクトに表示したい場面に適しています。クリックしたタイミングだけ表示されるため、画面を広く使いながら必要な情報を分かりやすく案内できます。また、フェードアニメーションによって表示・非表示が自然につながり、見た目にも滑らかな操作感を実現できます。

HTMLではボタンの文字やポップオーバー内の文章を変更できます。CSSでは横幅、余白、背景色、枠線、角丸、影、表示位置、フェード時間などを自由に調整できます。JavaScriptではクリック時の表示・非表示を切り替えるシンプルな処理のみを行っているため、初心者でも構造を理解しやすく、用途に合わせてカスタマイズしやすいサンプルです。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

フェードイン・フェードアウトするポップオーバー

ボタンをクリックすると、ゆっくりフェードしながら表示・非表示が切り替わります。

フェードインしながら少し下へ移動して表示され、閉じるとフェードアウトしながら元の位置へ戻ります。

ボタンをクリックして、フェードイン・フェードアウトのアニメーションを確認してください。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>フェードイン・フェードアウトで表示するポップオーバー</title>

  <!-- CSSファイル -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- ポップオーバー全体 -->
  <div class="fade-in-popover_wrap">

    <!-- タイトル -->
    <div class="fade-in-popover_title">
      フェードイン・フェードアウトするポップオーバー
    </div>

    <!-- 説明文 -->
    <p class="fade-in-popover_text">
      ボタンをクリックすると、ゆっくりフェードしながら表示・非表示が切り替わります。
    </p>

    <!-- ボタンとポップオーバー -->
    <div class="fade-in-popover_area">

      <!-- 表示ボタン -->
      <button
        class="fade-in-popover_button"
        id="fade-in-popover-button"
        type="button">
        ポップオーバーを表示
      </button>

      <!-- ポップオーバー -->
      <div
        class="fade-in-popover_popup"
        id="fade-in-popover-popup">
        フェードインしながら少し下へ移動して表示され、閉じるとフェードアウトしながら元の位置へ戻ります。
      </div>

    </div>

  </div>

  <!-- JavaScriptファイル -->
  <script src="script.js"></script>

</body>
</html>
コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。ページ内のボタンをクリックすると、ポップオーバーがフェードインしながら表示され、もう一度クリックするとフェードアウトしながら非表示になります。HTMLでは表示内容を作成し、CSSではフェードアニメーションやデザインを設定し、JavaScriptでは表示・非表示を切り替える処理を行います。 

sample/
├── index.html
├── style.css
└── script.js

各ファイルの役割
index.htmlはポップオーバー全体を構成するファイルです。ボタンの文字、ポップオーバー内の説明文などを変更できます。

style.cssはポップオーバーのデザインやフェードイン・フェードアウトのアニメーションを設定するファイルです。背景色、余白、角丸、影、表示位置、フェード時間などを変更できます。

script.jsはボタンをクリックしたときにポップオーバーの表示・非表示を切り替えるファイルです。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。「ポップオーバーを表示」ボタンをクリックするとフェードインしながら表示され、もう一度クリックするとフェードアウトしながら閉じます。

カスタマイズできる内容
index.htmlではボタンの文字やポップオーバー内の文章を変更できます。用途に合わせて補足説明、お知らせ、注意事項など自由な内容へ変更できます。

style.cssではポップオーバーの横幅、背景色、文字色、余白、角丸、影、表示位置、移動量、フェード時間を変更できます。デザインやアニメーションの印象を用途に合わせて調整できます。

数値調整
style.css
max-width:700px;
全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

width:300px;
ポップオーバーの横幅です。値を大きくすると広くなり、小さくすると狭くなります。

padding:32px;
全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。

border-radius:12px;
ポップオーバーの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

translateY(-18px)
表示前の開始位置です。値を大きくすると上側から移動する距離が長くなり、小さくすると移動量が少なくなります。

scale(.92)
表示前の拡大率です。値を小さくすると小さい状態から表示され、大きくすると表示時の変化が控えめになります。

transition:.45s;
フェードイン・フェードアウトの時間です。0.45秒でアニメーションします。値を大きくするとゆっくり、小さくすると速くなります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのmax-width:700pxとポップオーバーの幅指定により、画面サイズに応じて表示されます。また、640px以下ではポップオーバーの横幅と余白を調整しているため、スマートフォン・タブレット・PCで利用できます。

こちらもおすすめ

ポップオーバー
ポップオーバーのサンプルコード一覧

この記事の他にも、コピペですぐ使える実用的なサンプルコードを掲載しています。デモを確認しながら、用途に合うコードを探せます。

その他のコードを探す
トップページ
コピペですぐ使えるサンプルコードを探す

実用的なサンプルコードをカテゴリ・新着記事・人気記事から探せます。用途に合ったコードを見つけて、そのままコピペで利用できます。

トップページで探す！

コメント