いつも読んで頂きありがとうございます。
以前、mio(id:mio20100501)さんがCSSでカメレオンの作品を出していて舌がクルクル回
って餌を取れるようにならないかと思って考えていました。
パラパラ漫画でやってみた
舌を出すにはLSSの日目のスクワットの応用で出来ますがクルクルはkeyframesで画像を
組み合わせないと無理かなと思っていました。
ちょっと調べてみるとCSSでパラパラ漫画が出来るみたいのなのでやってみました。
どうでしょうか？
パラパラ漫画の作り方
まずはカメレオンがハエを採る画像を作ります。今回は5枚作りました。
作成する時は横幅と縦幅を同じにして画像位置が変わらないようにします。
これを横に繋ぎ合わせて一枚の画像にします。
今回のコード
.parapara {
width: 220px;
height: 220px;
background: url(使用する画像URL) no-repeat;
animation: parapara 2s steps(5) infinite;
}
@keyframes parapara {
to {
background-position: -1200px 0;
}
}
</style>
<div class="parapara"> </div>
widthとheightは画像に合わせてください。
枚数が多くなるとwidthとheightの幅は小さくなります。
使用する画像をbackgroundで指定しno-repeatで画像を繰り返さないようにします。
steps(〇)は使用した画像の枚数の数値を入れます。今回は5枚使用しているのでsteps(5)
になります。
最後にkeyframesで画像の最大幅を設定します。
background-position: -画像最大幅px 0;
widthの幅に画像枚数を掛けた数値で大体行けますが見ながら微調整してください。
設定が違うと画像が横に流れたり変な動きをします。
枚数を多くすれば複雑な物も作れますがその分画像が小さくなります。
background-sizeで大きさを設定すると大きくなりますがwidthとbackground-postionの
調整が面倒になるかもしれません。
最後に
カメレオンの画像ばかりで申し訳なかったです。もっと舌を巻いた感じか吹き戻し(ピロ
ピロ笛)の画像で作れば良かったかもしれませんがそこまでの技量がないので勘弁してく
ださい。絵が得意な人はいろいろ出来そうですね。
