ボタンをクリックすると、画面右下からフワッと現れるメッセージウィンドウ（ポップアップメッセージ）の作り方を公開します。
自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればと思います！
その他のメッセージ表示方法はこちら
【JS&CSS】ボタンを押したらメッセージを表示する方法4選
以下のような、ボタンクリック(タップ)でメッセージを表示する方法を紹介します。 アラート ボタン１ OKボタン付きのダイアログボックスを表示。 実装方法はこちら アコ…
目次
実装例とコード
ボタンをクリックすると、右下にポップアップメッセージが表示されます。
下からスッと現れて、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秒かけて実装されます。
シンプルなアニメーションについてはこちら
マウスホバーやボタンクリック（タップ）に反応するような、シンプルなアニメーションにはtransformやtransitionを使います。以下のような実装に向いています。
あわせて読みたい
【JS&CSS】クリック（タップ）で画像を拡大させる
transform: scale;を使って、画像や図形を拡大表示させる方法を紹介します。自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればとも思います！…
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秒かけて実行することで、「フワッと現れてフワッと戻る」というアニメーションになる。
- 最初(0%)は
- 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は、アニメーションが完了したときに実行されるイベント。アニメーションが完了したときに、メッセージウィンドウのクラスの状態を元に戻す。