吉野家の湯気の表現が気になった

吉野家の湯気

Flashの代わりにHTML5という話は良く聞く話ですが、
牛丼屋さんで面白い(？)表現をしていたので書いてみました。
有名なのでいくと
RAIZIN Coolで学ぶ、イマドキのWebサイトの作りかた
こういうのや
CSS3Dで作られたリアルな”雲”、チュートリアル付き 【増田 @maskin】

上の様にJavaScriptでゴリゴリ動きを表現しているのかなと思いましたが、現実はちょっと違ったので面白かったです。

「もくもく動く湯気」

さて、気になった内容です。
キャンペーン商品から湯気が立ち上っているのですが、
お味噌汁の椀あたりで湯気がキレイに切られて見えています。

スゴく気になってしまいました。

気になってソースを見てみました。
HTMLではyugeという画像が3枚います。

続いて動きをつけてるJavascriptです。
yugeMotion がそれにあたります。

ディフォルトの位置から湯気画像をanimationで動かしています。それの繰り返しで湯気が立っています。
こういうやり方もあるのですね。そのままというかシンプルというか、湯気に見えるのでOKだと思います。
湯気が切れてなければなお良かったと思いました。

コメントアウトされているyuge4とyuge5があるといい感じになるのでしょうか。

Tweet