ボタンをクリックすると、画面右下からフワッと現れるメッセージウィンドウ（ポップアップメッセージ）の作り方を公開します。
自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればと思います！
その他のメッセージ表示方法はこちら
【JavaScript&CSS】ボタンを押したらメッセージを表示する
alertやアコーディオン、モーダルウィンドウを使って、ボタンを押したらメッセージを表示する方法を3つ紹介します。自分の学習・メモ用がメインですが、プログラミング…
目次
実装例とコード
ボタンをクリックすると、右下にポップアップメッセージが表示されます。
下からスッと現れて、3秒ほど留まったあとに、またスッと消えていきます。
コード
ポップアップ表示のような複雑なアニメーションには、CSSプロパティの「@keyframes」を使います！
以下のように記述することで、特定の要素に多様なアニメーションがつけられます。
div {
animation: 1s xxx;
}
@keyframes xxx { /* xxxは好きな名前でOK */
0% {
/* 変化前の状態 */
}
50% {
/* 変化中の状態。%の値は自由に決められ、複数用意してもOK。 */
}
100% {
/* 変化後の状態 */
}
}上の例のように、@keyframeで変化の内容を記述し、変化をつけたいスタイルにアニメーション名と変化時間を記載します。これでdiv要素には、@keyframesに設定したアニメーションが1秒かけて実装されます。
シンプルなアニメーションについてはこちら
マウスホバーやボタンクリック（タップ）に反応するような、シンプルなアニメーションには「transform」や「transition」を使います。以下のような実装に向いています。
あわせて読みたい
【JavaScript＆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%);」で画面下側に配置しておき、「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」は、アニメーションが完了したときに実行されるイベント。アニメーションが完了したときに、メッセージウィンドウのクラスの状態を元に戻す。