プラグインを使わずに湯気のアニメーションを作成


湯気を横から見たアニメーションの作り方は見つかるんですが、真上から見たアニメーションは見つからなかったので作成。

サンプル見たほうが早いと思うので、サンプルはこちらから。

アニメーション部分をJavaScriptだけで描画すると、コマ落ちしたのでCSSのanimationを使いました。
ソース見ればわかりますが、CSSが力技。笑
不思議なもので、ある程度数が増えると、立体的に動いてるかのように見えてくるという。

使用している湯気の画像はこの3種類。
これをランダムに回転させることで、大量の湯気が発生しているように見せています。

以下、ソース解説。

まずはCSS部分。
上限を50個に決め打ちして、大量生産。

JavaScript部分
ものすごく簡単に言うと、3種類の画像を、バラバラの位置に生成してるだけです。

サンプルはこちら

ソース一式のダウンロードはこちらから。
ソースの使用はご自由にドゾ。

SNSでシェア