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

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

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

目次

実装例とコード

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

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

コード

ポップアップ表示のような複雑なアニメーションには、CSSプロパティの@keyframesを使います!
基本的な構文は以下のようになります。

div.animation {
  animation: 1s xxx;
}

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

まず、@keyframeで変化の内容を記述します。
次に、変化をつけたい要素(上の例ではdiv.animation)にアニメーション名(上の例ではxxx)と変化時間(上の例では1s)を記載します。

これで、div.animaiton要素には、@keyframesに設定したアニメーションが1秒かけて実装されます。

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

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

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%);で画面下側に配置、opacity: 0;で見えないようにする。
    • 続いて(10〜90%)、transform: none;で元の位置に戻し、opacity: 1;で見える状態に。
    • 最後(100%)はtransform: translateY(15%);で画面下側に移動させ、opacity: 0;で再び見えないようにする。
      • 上記を3秒かけて実行することで、「フワッと現れてフワッと戻る」というアニメーションになる。
  • 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をコピーしました!
目次