はじめに
こんにちは！@70days_jsです。
寿司屋の日常を作りました。
寿司屋の店主をホバーしたら客が「旨い！」と言うだけですがご了承ください。
63日目。(2019/12/20)
よろしくお願いします。
サイトURL
やったこと
これを作りました。(gif)↓
html↓
<body>
<h1>寿司屋の日常</h1>
<img id="taisyo" src="day63_1.png" alt="寿司屋の大将" />
<img id="sushi" class="sushi" src="day63_2.png" alt="寿司" />
<img id="kyaku" src="day48men.png" alt="客" />
<div id="fukidashi" class="fukidashi"></div>
<div>↑マウスを乗せてね</div>
</body>
css↓
body {
margin: 0;
}
img {
width: 100px;
height: auto;
}
#kyaku {
position: absolute;
left: 700px;
}
.sushi {
display: none;
}
.sushiZanmai {
animation: go 1s ease 0.5s;
animation-fill-mode: forwards;
}
@keyframes go {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(500px);
}
}
.fukidashi {
display: none;
width: 50px;
margin-top: 10px;
position: absolute;
left: 800px;
text-align: center;
padding: 30px;
background-color: black;
border-radius: 100%;
z-index: 10;
}
.fukidashi::after {
color: white;
content: "旨い!";
}
.fukidashi::before {
left: -5px;
margin-top: 2px;
content: "";
position: absolute;
display: block;
z-index: 1;
border-style: solid;
border-color: transparent black;
border-width: 10px 10px 10px 0px;
}
JavaScript↓
taisyo.addEventListener("mouseover", function() {
sushi.classList.remove("sushi");
sushi.classList.add("sushiZanmai");
setTimeout(function() {
fukidashi.style.display = "inline-block";
sushi.classList.remove("sushiZanmai");
sushi.classList.add("sushi");
}, 2000);
});
ほとんどcssで実装しています。
JavaScriptはマウスが乗ったかどうかを検知して、スタイルの付け替えだけしています。
「旨い！」の吹き出しはcssの.fukidashiクラスと::befer, ::afterを用いて作っています。
寿司の移動はanimationを用いています。
寿司の移動↓
@keyframes go {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(500px);
}
}
animation-fill-modeをforwardsにすることで、animation終了時の状態を保持し、animationが終了しても寿司が店主のもとに帰らないようにしています。
客の元に残った寿司はsetTimeoutで2秒後に消えるようになっています。
setTimeout(function() {
fukidashi.style.display = "inline-block";
sushi.classList.remove("sushiZanmai");
sushi.classList.add("sushi");
}, 2000);
感想
こういうちょっとしたアニメーションでも、あるのとないのとではwebサイトの印象が変わるのかなとか思いました。
どう変わるかは分かりませんが
最後まで読んでいただきありがとうございます。明日も投稿しますのでよろしくお願いします。
参考
素材を使わせていただきました！