はじめに

こんにちは！@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サイトの印象が変わるのかなとか思いました。
どう変わるかは分かりませんが

最後まで読んでいただきありがとうございます。明日も投稿しますのでよろしくお願いします。

参考

アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト | 6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO

素材を使わせていただきました！