【Javascript&CSS】ポップアップメッセージの作り方

JavaScriptとCSSでポップアップメッセージを作る方法

ボタンをクリックすると、画面右下からフワッと現れるメッセージウィンドウ(ポップアップメッセージ)の作り方を公開します。
自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればと思います!

ブラウザはGoogle Chromeを使い、Wordpress上で実装しています。

目次

実装例とコード

ボタンをクリックすると、右下にポップアップメッセージが表示されます。

下からスッと現れて、3秒ほど留まったあとに、またスッと消えていきます。

コード

ポップアップ表示のような複雑なアニメーションには、CSSプロパティの「@keyframesを使います!
以下のように記述することで、特定の要素に多様なアニメーションがつけられます。

div {
  animation: 1s xxx;
}

@keyframes xxx {   /* xxxは好きな名前でOK */
  0% {
    /* 変化前の状態 */
  }
  50% {
    /* 変化中の状態。%の値は自由に決められ、複数用意してもOK。 */
  }
  100% {
    /* 変化後の状態 */
  }
}

上の例のように、@keyframeで変化の内容を記述し、変化をつけたいスタイルにアニメーション名と変化時間を記載します。これでdiv要素には、@keyframesに設定したアニメーションが1秒かけて実装されます。

シンプルなアニメーションについてはこちら

マウスホバーやボタンクリック(タップ)に反応するような、シンプルなアニメーションには「transform」や「transition」を使います。以下のような実装に向いています。

HTML/CSS/JavaScript コードはこちら
<div class="button-box">
  <button>Click!</button>
</div>
<div class="message hidden">Have a nice day!</div>
.button-box {
  width: 100%;
  padding: 8px 16px;
  margin: 16px auto;
}

button {
  width: 50%;
  max-width: 300px;
  height: 2.5em;
  margin: 8px auto;
  padding: 4px 0;
  border-radius: 4px;
  background-color: blue;
  color: white;
  font-size: 24px;
  font-weight: bold;
}

button:hover {
  opacity: .7;
}

.hidden {
  display: none;
}

.message {
  width: 25%;
  min-width: 300px;
  height: 100px;
  padding: 8px 16px;
  border-radius: 8px;
  background: #ddd;
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  line-height: 100px;
  position: fixed;
  right: 5%;
  bottom: 10%;
}

.popup-message {
  animation: popup 3s forwards;
}

@keyframes popup {
  0% {
    transform: translateY(15%);
    opacity: 0;
  }
  10%, 90% {
    transform: none;
    opacity: 1;
  }
  100% {
    transform: translateY(15%);
    opacity: 0;
    pointer-events: none;
  }
}
  • @keyframesでpopupというアニメーションを設定。
    最初(0%)は「transform: translateY(15%);」で画面下側に配置しておき、「transform: none;」で元の位置に戻してしばらくそのまま、最後(100%)は再び「transform: translateY(15%);」で画面下側に戻す。opacityもいっしょに設定しておくことで、下からフワッと出て再びフワッと下に消えるようなアニメーションになる。
  • JavaScriptで、このアニメーションを設定したクラス(popup-message)をボタンクリックで付け外しする。
const message = document.querySelector('.message');

document.querySelector('button').addEventListener('click', () => {
  message.classList.remove('hidden');
  message.classList.add('popup-message');
});

message.addEventListener('animationend', () => {
  message.classList.remove('popup-message');
  message.classList.add('hidden');
});
  • ボタンクリックで、メッセージウィンドウに「hidden」と「popup-message」クラスを付け外しできるようにする。
  • 「animationend」は、アニメーションが完了したときに実行されるイベント。アニメーションが完了したときに、メッセージウィンドウのクラスの状態を元に戻す。
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ノベルティグッズのECサイトを運営する中小企業役員。
本ブログを通じ、販促向けの最新/ロングセラー商品紹介やWebサイト制作に役立つ技術情報を発信しています。

目次