creonメモ

コーディングやデザインの作業メモなど

マウスオーバーでふわふわ動く旗

css JavaScript

f:id:iriarj:20191226090347j:plain

タイトルのままですが、マウスをのっけると上下にふわふわ動く日本国旗です。 こんな感じ

html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>floating</title>
  <link href="https://fonts.googleapis.com/css?family=Noto+Serif+JP&display=swap" rel="stylesheet">
  <link href="css/base.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="flag">
  <div class="reiwa">
    令和
  </div>
</div>
<script src="js/base.js"></script>
</body>
</html>
CSS

htmlのhead内で読み込んでいるcss/base.cssの記述内容です。 今回はreset系のCSSは使っていません。

html {
  font-size: 62.5%;
}
body {
  background: #efefef;
  font-size: 1.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.flag {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 21rem;
  height: 14rem;
  position: relative;
  cursor: pointer;
}
.jump {
  animation: jump-anime 1s ease-in-out infinite;
}
@keyframes jump-anime{
  0% {
    bottom: 0;
  }
  50% {
    bottom: 2rem;
  }
  100% {
    bottom: 0;
  }
}
.reiwa {
  background: #F20000;
  border-radius: 50%;
  color: #fff;
  font-family: 'Noto Serif JP', serif;
  font-size: 2.3rem;
  line-height: 1;
  margin: 0 auto;
  padding: 1.9rem 3.05rem;
  writing-mode: vertical-rl;
}
JavaScript

htmlの下の方で読み込んでいるjs/base.jsの記述内容です。

const flag = document.getElementsByClassName('flag')[0];

flag.addEventListener('mouseover', () => {
  flag.classList.add('jump');
})

flag.addEventListener('mouseout', () => {
  flag.classList.remove('jump');
});
ちょっとだけコードの説明

bodyの子要素の国旗をflexboxで中央に指定しています。 （他に要素もないのでbodyに設定しましたが、普通のサイトではbodyに書くケースはあまりないと思います）

flagクラスが国旗部分、reiwaクラスが「令和」の文字部分と国旗中央の赤いところです。 赤の指定は公式には「紅色」なのですが、好みの赤を指定しました。 赤い丸も国旗の位置指定と同様にflexboxで中央にしています。 writing-modeにvertical-rlを指定することで文字を縦書きにします。

htmlでは使っていませんが、jumpクラスをつけると上下にふわふわ動くアニメーションを設定します。

そのjumpクラスをjavascriptでマウスオーバーイベントで追加、マウスアウトで削除させています。

今回の動きだけならjsを使わずに実装できますが、jsを使えば更にバッジつけたりウィンドウ出したりやりやすいので、どちらかといえばこちらが好みです。