現在作成中のサイトをデザイナーさんに診断してもらい、画面に動きを出すと面白いと思いますよと言われて以下のヘッダー画像の女の子の足をブラブラさせるやり方を探していました。
デザイナーさんのアドバイスでは
基本的に子供の足を編集した別画像データを0.5秒～2秒ぐらいのインターバルで、入れ替えるといった形になります。文字をcssで乗っける場合はpositionを使う事になるので、その場合はbackground-imageの方を指定して、jsで画像を交互に入れ替える。などでも実装可能です。他にも「動かす」という意味では色々な方法があります。
という話でした。CSSやJSのプログラミング知識が無い私にはあまり理解できていなかったです。(； ･`ω･´)
ただやり方は複数あることが解りましたし、JSの知識が無いのでなんとかCSSで出来ないか検討していました。僕のCSSの先生からは画像の一部を動かすのは無理ですよ～という助言をされたのですが、どうしても諦めることができず調査してたらついに出来てしまいました。
とは言えかなり力技なのでこんなやり方で良いのか、負荷は軽いのか検討もつきません。
↓これは動画で取ったやつです。こんな風に動く。
CSSで画像の一部を動かす（ように見せる）やり方
ここでは考え方を示します。
まず画像を2枚用意しました。
①これが元になる画像。（png形式）
②こちらが女の子の足以外は透過にしたpng画像
この2枚の画像を重ねて、②の画像をcssでswingで指定します。
これできっとできるはず！と思いました。
cssによるアニメーションの基本
cssによるアニメーションのパターンは様々あります。
こちらのサイトにデモとcssのダウンロードがあるのでを参考にしました。
https://daneden.github.io/animate.css/
このページで「Swing」を選んで「Animate it」をクリックすると「Animate.css」の文字がゆらゆら振り子のように揺れます。他にも様々なアニメーションパターンが見れるので自分の好きなものを参考にすると良いです。
赤丸のところからanimate.cssをダウンロードするとCSSが入ってるのでそれを活用してもOKです。
さて、ブラブラさせます。
最も基本的な書き方はcssは以下のように記述しました。
.swing {
transform-origin: top left;
animation: burabura linear 2s infinite;
}
@keyframes burabura {
0% { transform: rotate(0deg); }
25% { transform: rotate(-10deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(10deg); }
100% { transform: rotate(0deg); }
}
htmlは以下のように記述。
<div class="swing"><img src="画像.png"></div>
これでOKです。左上を中心に左右に振り子のように動きます。
◆解説
transform-origin: top left;について
これは原点の指定です。top leftは、一番上の一番左なので左上隅の角を原点として動きます。
もしこれが
transform-origin: bottom right;
であれば、以下のように右下を原点として回転します。center centerなら真ん中が原点になるわけですね。
この画像は横幅が320で縦が200pxです。ピクセルやパーセンテージでも指定ができます。
transform-origin: 60% 90%;
x座標が320pxの60%で、y座標が200pxの90%なのでたぶんこのあたりが原点になってるはずです。
animation: burabura linear 2s infinite;について
buraburaというアニメーション名を指定しています。このburaburaは下の方で@keyframesルールでキーフレームを定義してます。
linearはアニメーションのタイミング、進行割合を一定にします。
2sというのはアニメーション1回分の長さを2秒にして
infiniteでアニメーションの再生回数を無限に指定してます
それぞれのプロパティは「animation-name」「animation-timing-function」「animation-delay」「animation-iteration-count」でも指定できます。値は他にもあるのでリファレンスを見てください。
@keyframes burabura について
これがアニメーション名で指定したキーフレームの定義部分です。
これの中身ですが、0%がアニメーション開始時点、100%が終了時点です。また進行途中も0～100%で指定できます。
rotate(0deg)は動いてない状態。rotate(10deg)は時計回りに10度回転、rotate(-10deg)は反時計周りに10度回転を意味します。
rotete()の他にrotateX、rotateY、rotateZ、rotate3dがありますが詳しくはリファレンスにて。
cssで画像の上に画像を重ねる方法
これは色んなcssを解説しているサイトにも記述があるのでそこを参考にしました。
positionの指定とか理解するのが難しいので
| 暗記 |
|---|
| 「画像の上に画像（文字も可）を重ねるときは、relative＋absolute」 |
cssは以下のように記述。
.sita {
position: relative;
overflow: hidden;
}
.sita .onimage{
position: absolute;
top: 0px;
left: 0px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
HTMLは以下のように記述。
<div class="sita"> <img src="./images/basebg.png"> <div class="onimage"><img src="./images/asi.png"></div> </div>
top: 0px;とleft: 0px;というのは重ねる位置です。実はbasebg.pngとasi.pngは画像サイズが同じです。なので左上隅でぴったり重なるようにしてます。
重ねた足の方をcssで動かす
動かす位置の原点はこのへんです。
なのでtransform-originで、160pxの246pxを指定しました。
.swing {
transform-origin: 160px 246px;
animation: burabura linear 2s infinite;
}
レスポンシブ画面を想定するのでpxではなく％で指定しないといけないので、画像の横縦は600×300だから%で表すと、160÷600＝27%、246÷300＝82%ですので。
transform-origin: 27% 82%
HTMLはこのようにします。onimageの後にswingで指定。
<div class="bura"> <img src="./images/basebg.png"> <div class="onimage swing"><img src="./images/asi.png"></div> </div>
あとはブラウザごと表現が違うので、それを網羅して記述します。
-moz-というのはFirefox向け
-webkit-はGoogle Chrome向け
-ms-はMS InternetExplore向け
-o-はOperaむけ
とのこと。
全文は
<div class="bura"> <img style="max-width:100%;" src="./images/basebg.png"> <div class="onimage swing"><img style="max-width:100%;" src="./images/asi.png"></div> </div>
@charset "UTF-8";
@-moz-keyframes swing {
0% { -moz-transform: rotate(0deg) }
25% { -moz-transform: rotate(5deg); }
50% { -moz-transform: rotate(0deg); }
75% { -moz-transform: rotate(-5deg); }
100% { -moz-transform: rotate(0deg); }
}
@-webkit-keyframes swing {
0% { -webkit-transform: rotate(0deg); }
25% { -webkit-transform: rotate(5deg); }
50% { -webkit-transform: rotate(0deg); }
75% { -webkit-transform: rotate(-5deg); }
100% { -webkit-transform: rotate(0deg); }
}
@-o-keyframes swing {
0% { -o-transform: rotate(0deg); }
25% { -o-transform: rotate(5deg); }
50% { -o-transform: rotate(0deg); }
75% { -o-transform: rotate(-5deg); }
100% { -o-transform: rotate(0deg); }
}
@keyframes swing {
0% { transform: rotate(0deg); }
25% { transform: rotate(5deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}
.swing {
-moz-animation: swing linear 0.5s infinite;
-moz-transform-origin: 27% 82%;
-webkit-animation: swing linear 0.5s infinite;
-webkit-transform-origin: 27% 82%;
-ms-animation: swing linear 0.5s infinite;
-ms-transform-origin: 27% 82%;
-o-animation: swing linear 0.5s infinite;
-o-transform-origin: 27% 82%;
animation: swing linear 0.5s infinite;
transform-origin: 27% 82%;
}
.bura {
position: relative;
overflow: hidden;
}
.bura .onimage{
position: absolute;
top: 0px;
left: 0px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
こんな感じ。
使う人はいないと思いますがテスト用のcss-anime-swing.zipを置いておきます。
え？女の子の足が一瞬もげてるって？ び、微調整が必要なだけだからっ（汗
