今日はGIFアニメを使って、魚が池のまわりをくるくる周りながら泳いでいるような自分流CSSアニメーションの作り方についてです。
ちなみにそのCSSアニメーションのサンプルがこちら
※上記サンプルではわかりやすいように回転軸にあたる部分に色をつけています
また、上記を取り入れて作ったポートフォリオサイトがこちらになります。
CSSアニメーションで検索すると、イラスト自体がくるくる回るアニメーションの作り方はいくらでも探せるのですが、円の周りをくるくる回るアニメーションの作り方は載っておらず。。以下の方法は試行錯誤の末に作ったものなので、もっと効率的に実現できるよ～って方法をご存じの方がいらしたらご教示頂けると幸いです。
上記サンプルのフレームワークはこんな感じです。
各要素の役割です。
img.img__fish・・・・尾びれを降る魚のGIFアニメーション
div.axis__rotation・・回転軸の役割。回転軸に回転動作を加えるアニメーションを設定
div.fish__box・・・・回転軸の位置(topとleft)と幅を設定
div.bg・・・・・・・背景画像を設定
div.wrapper・・・・.fish__boxを.bgの上に重ねるための親要素(position: relativeを設定)
ソースは以下になります (上記で記載した要素に関わる部分は赤字にしています)。
◆HTML (index.html)
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>fish rotation</title>
<link rel=”stylesheet” href=”https://unpkg.com/ress/dist/ress.min.css”>
<link rel=”stylesheet” href=”css/style.css”>
</head>
<body>
<div class=”wrapper”>
<div class=”bg”>
<div class=”fish__box”>
<div class=”axis__rotation”>
<img class=”img__fish” src=”img/fish_anime01.gif” alt=”魚のアニメーションGIF”>
</div>
</div>
</div>
</div>
</body>
</html>
◆CSS (style.css)
@charset “UTF-8”;
/* — 共通部分 ここから —————– */
img {
vertical-align: bottom;
max-width: 100%;
max-height: 100%;
}
/* — 共通部分 ここまで —————– */
.wrapper{
position: relative;
}
.bg{
background-image: url(../img/water02.png);
height: 0;
padding-top: 57.29%;
background-size: contain;
}
.fish__box {
position: absolute;
width: 40%;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
.axis__rotation{
background-color: pink; /* この行は消してＯＫ（わかりやすさのために色をつけているだけです）*/
animation: r5 10s linear infinite;
}
.img__fish {
width:10%;
height: 10%;
}
@keyframes r5 {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
また、もし魚のアニメーションGIFがご入り用でしたら、上記サンプルサイトから右クリック保存で自由に使ってください。
(ご使用の際は一言報告頂けたら大いに喜びますが、報告頂かなくても使用可能です)
以下、ソースについて補足です。
回転軸に関するdivクラスは二つ(.fish__boxと.axis__rotation)あります。
一つのdiv要素だけにまとめたかったのですが、animationプロパティとleft,topプロパティを同時に設定できなかったため(animationを指定するとleft,topが効かなくなる)二つに分けました。
この二つって同時に使えないものだっけ･･･？すみません、この辺よく分からないので時間あったら勉強しときます。。
.bgにheight:0とpadding-top: 57.29%を指定しているのは、ブラウザの大きさを変えても背景画像の比率が変わらないようにするためです。
今回は背景画像に波紋のような模様を設定し、その周りを魚にくるくる回らせたいので、背景画像の比率を維持する必要があります。
padding-topの57.29%は、今回設定している背景画像のサイズから算出したもの(1920px × 1100pxなので、1100px÷1920px ＝0.57291･･･ ≓ 0.5729)なので、使用する背景画像に合わせて数値は適宜変更して下さい。
.fish__boxのwidth: 40%は回転軸の長さに該当します。
もっと小さい円で回らせたい場合は小さい値を、大きい円にしたい場合はもっと大きい値に設定して下さい。
以上で今日はこの辺で。
最後までお読み下さりありがとうございました！