2017-02-17

tobijibu

CSSのアニメーションを勉強する

今までCSSのアニメーションを使った動きを全く使ってきませんでした。 最近のブラウザでは、CSSアニメーションが動かないということはほぼ無いので、改めて勉強してみようと思いました。

そこで、CSSでビックリマンシールっぽいものを作ってみました。 何に使えるわけでもなく、とても無意味ですが、丁度良い難易度かなと。

とびじぶ

マウスオーバーすると、キラっと光るようなアニメーションを作成しました。

ついでにポインタをgrabにして、ほんの少しだけ傾けることで、実際にシールを傾けている感覚を表現しました。(IEではポインタは変わりません)

divbikkuriというクラスを設定し、その子供にキャラクター用の要素を追加します。 divcharacterクラスを設定し、p(名前)img(画像)を追加します。

<div class="bikkuri">
    <div class="character"><p>とびじぶ</p><img src="./tbjb.png"></div>
</div>

あとは、characterと同階層に<div class="kira"><div></div></div>を64個入れれば良いのですが、とても面倒なのでここはjsを使って生成してしまいます。

var bikkuri = document.querySelector('.bikkuri'),
    df      = document.createDocumentFragment(),
    div_p   = document.createElement('div'),
    div_c   = div_p.cloneNode(false);
div_p.appendChild(div_c);
div_p.className = 'kira';
for (var cnt = 0; cnt < 64; cnt++) {
    _div_p = div_p.cloneNode(true);
    df.appendChild(_div_p);
}
bikkuri.appendChild(df.cloneNode(true));

それっぽいのは作れたのですが、いくつか課題があります。

キャラクターの名前をアーチ型にしたかったのですが、CSSでの指定のみではかなり難しく、実現できませんでした。 今回の方法では、文字サイズを枠に合わせて自動調整することも出来ませんでしたし、フォントも実物に似たフォントが無かったので、名前は画像の方が良いのかもしれません。

また、キラキラの1マスの表示を、円錐型で上手く表現したかったのですが、これも現状では難しく、実物に近いキラキラ感を出すことができませんでした。今回の方法では安っぽいキラキラですね。

CSSに慣れている人であればもっとシンプルな構造で作ることができるかもしれません。もっと勉強が必要だなと感じました。


ソースはこちらにあります。