はじめに
年末年始はエビを揉もう!!
ということで今回はHTML, CSSでエビを揉んでいきます！
今回利用しているkeyFrames, animationの解説はエビ揉んだ後におまけとして記載しておきます。
揉みハンド作成
まずは手の部分を作成します！
(手の素材は何でもいいので良い感じのものを見繕います)
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="hand.css" rel="stylesheet" type="text/css" media="all">
<title>Every moment!</title>
</head>
<body>
<div class="circle-path">
<div class="hand">
<img src="hand.png" alt="Image 1">
<img src="hand.png" alt="Image 2">
</div>
</div>
</body>
</html>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
overflow: hidden;
}
.circle-path {
position: relative;
width: 300px;
height: 300px;
}
.circle-path .hand {
position: absolute;
top: 50%;
left: -50%;
display: flex;
gap: 10px;
}
.circle-path .hand img {
width: 200px;
height: 200px;
transform: scaleX(-1) translate(-50%, -50%);
animation: handCircularMotion 1s linear infinite;
}
@keyframes handCircularMotion {
0% {
transform: scaleX(-1) translate(-50%, -50%) rotate(0deg) translate(30px) rotate(0deg);
}
100% {
transform: scaleX(-1) translate(-50%, -50%) rotate(360deg) translate(30px) rotate(-360deg);
}
}
いい感じに揉めていますね！
揉まれるエビ配置
今度は揉まれているエビを呼んでみましょう！
(エビの素材も各々好きな素材をご利用ください)
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="every-moment.css" rel="stylesheet" type="text/css" media="all">
<title>Every moment!</title>
</head>
<body>
<div class="circle-path">
<div class="ebi">
<img src="fish_ebi.png">
</div>
<div class="hand">
<img src="hand.png" alt="Left hand">
<img src="hand.png" alt="Right hand">
</div>
</div>
</body>
</html>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
overflow: hidden;
}
.circle-path {
position: relative;
width: 300px;
height: 300px;
}
.circle-path .hand {
position: absolute;
top: 50%;
left: -50%;
display: flex;
gap: 10px;
}
.circle-path .hand img {
width: 200px;
height: 200px;
transform: scaleX(-1) translate(-50%, -50%);
animation: handCircularMotion 1s linear infinite;
}
.circle-path .ebi {
position: absolute;
top: 10%;
left: -30%;
display: flex;
}
.circle-path .ebi img {
width: 400px;
height: 400px;
transform: translate(-50%, -50%);
animation: ebiCircularMotion 1s linear infinite;
}
@keyframes handCircularMotion {
0% {
transform: scaleX(-1) translate(-50%, -50%) rotate(0deg) translate(30px) rotate(0deg);
}
100% {
transform: scaleX(-1) translate(-50%, -50%) rotate(360deg) translate(30px) rotate(-360deg);
}
}
@keyframes ebiCircularMotion {
0% {
transform: rotate(0deg) translate(10px) rotate(0deg);
}
100% {
transform: rotate(-360deg) translate(10px) rotate(360deg);
}
}
先ほどのソースにエビの処理を追加したものになります。(料理の話してるみたいに)
いい感じにエビを揉むことができました！
エビも嬉しそうに揉まれていますね(?)
さいごに
無事エビを揉むことができました！
皆さんも年末年始にいろいろな技術を使ってエビを揉んでみてはいかがでしょうか？
では、皆さま良いお年を！
おまけ) CSSアニメーション解説：＠keyframesとanimation
お好みでどうぞ
今回利用した、keyframes, animationについて初心者なりに解説するので、お時間ある方は見ていただけると嬉しいです。
初学者による解説のため、誤り等ありましたらコメントいただけますと幸いです。
＠keyframes
＠keyframesはCSSのアットルールで、CSSアニメーションの中間ステップを制御するために利用されます。
↓構文はこんな感じ↓
@keyframes hoge {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
}
先ほどのコードでいうとこの部分です。
@keyframes handCircularMotion {
0% {
transform: scaleX(-1) translate(-50%, -50%) rotate(0deg) translate(30px) rotate(0deg);
}
100% {
transform: scaleX(-1) translate(-50%, -50%) rotate(360deg) translate(30px) rotate(-360deg);
}
}
ここで何をしているのかというと、0%のところに書かれたスタイルから、100%のところに書かれたスタイルまで変化させていくよということを宣言しています。
つまり、上の処理は
transform: scaleX(-1) translate(-50%, -50%) rotate(0deg) translate(30px) rotate(0deg)
のスタイルから
transform: scaleX(-1) translate(-50%, -50%) rotate(360deg) translate(30px) rotate(-360deg)
のスタイルに変化させるぞということを表しているのです。
じゃあ0~100%までどのような感じで変化していくのという話になると思うのですが、ここでanimationが絡んできます。
(補足)途中で中間点を挟みたい場合は25%、50%、75%のように中間点の状態を記載してあげればその状態に持っていくことができます。
animation
animationは様々なanimationプロパティを一括で指定できるプロパティです。
以下のものを指定できます。
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timeline
- animation-timing-function
animation: handCircularMotion 1s linear infinite;
手の処理の部分ではanimationは上記のように記載されていました。
つまり
animation-name: handCircularMotion
animation-duration: 1s
animation-timing-function: liner
animation-iteration-count: infinite
を同時に指定していたというわけです。
これは アニメーション[handCircularMotion]を[1秒]で完了するように[線形的な進行]で[永遠に繰り返す]という処理を表しています。
実際のアニメーション
最後に、エビを揉む動きがどのような仕組みになっているかです。
コード上では以下のようになっていました。
@keyframes handCircularMotion {
0% {
transform: scaleX(-1) translate(-50%, -50%) rotate(0deg) translate(30px) rotate(0deg);
}
100% {
transform: scaleX(-1) translate(-50%, -50%) rotate(360deg) translate(30px) rotate(-360deg);
}
}
**[0%]
scaleX(-1): 画像を反転(手の形が逆方向を向いていたため)
translate(-50%, -50%): 画像の中心を基準点に移動させる
rotate(0deg): 始点では標準の状態
translate(30px): 基準点から30px外側にずらす
rotate(0deg): 始点では標準の状態
[100%]
scaleX(-1): 画像を反転(手の形が逆方向を向いていたため)
translate(-50%, -50%): 画像の中心を基準点に移動させる
rotate(360deg): 基準点を中心とした回転
translate(30px): 基準点から30px外側にずらす
rotate(-360deg): 画像の向きが変わらないように逆回転をかけた状態
これにより、
円の中心から30pxずれた状態で(translate(30px))、
画像の向きが変わらないように(rotate(-360deg))、
基準点を中心に回転させている(rotate(360deg))
ため↓のgifのような動きになります。