前回はフェードアウトを繰り返して鬱陶しかったので、くりっ気でフェードアウトし、完全に消えたままにしてみました。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="rule.css">
<title>Fade Out and Fixed On Click</title>
</head>
<body>
<div class="fade-out-and-fixed" id="fixedElement">
<img src="pic/raccoon.png" class="fade-out-image"
alt="Fading Raccoon Image">
</div>
<script>
const fixedElement =
document.getElementById("fixedElement");
fixedElement.addEventListener("click", () => {
// クリック時にフェードアウト
fixedElement.style.opacity = "0";
// フェードアウト後にスタイルを変更し、固定状態にする
setTimeout(() => {
fixedElement.style.visibility = "hidden";
fixedElement.style.position = "fixed";
}, 1000); // 1000ミリ秒（1秒）後にスタイル変更
});
</script>
</body>
</html>
<!-- index.html -->
/* rule.css */
@charset "UTF-8";
* {
margin: 0px;
padding: 0px;
}
body {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
/*
vh viewport height
ビューポートの高さに対する割合
*/
background-color: lightskyblue;
}
.fade-out-and-fixed {
position: absolute;
/* 初めはabsoluteで配置 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
opacity: 1;
visibility: visible;
transition: opacity 1s ease-in-out;
}
.fade-out-and-fixed.hidden {
visibility: hidden;
/* フェードアウト後にhiddenに変更 */
}
.fade-out-and-fixed.fixed {
position: fixed;
/* フェードアウト後にfixedに変更 */
}
/* rule.css */
実行イメージは上の様に5秒でフェードアウトし、消えたままになります。
