Tweet about this on TwitterShare on FacebookShare on Google+

お問い合わせ

会社名任意
ご担当者様氏名必須
メールアドレス必須
お問合せ内容必須

個人情報保護方針

BLOG

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

Flashの代わりにHTML5という話は良く聞く話ですが、牛丼屋さんで
面白い?表現をしていたので書いてみました。
 
有名なのでいくと
 
RAIZIN Coolで学ぶ、イマドキのWebサイトの作りかた
こういうのや
CSS3Dで作られたリアルな”雲”、チュートリアル付き 【増田 @maskin】
 
上の様にJavaScriptでゴリゴリ動きを表現しているのかなと
思いましたが、現実はちょっと違ったので面白かったです。
 
さて、気になった内容ですが「もくもく動く湯気」です。
キャンペーン商品から湯気が立ち上っているのですが、
お味噌汁の椀あたりで湯気がキレイに切られて見えています。
 
スゴく気になってしまいました。
 
yuge_cut-thumb-350x236-206
 
気になってソースを見てみました。
HTMLではyugeという画像が3枚います。
 
yoshinoya_yuge-thumb-355x117-210
 
続いて動きをつけてるJavascriptです。yugeMotion がそれにあたります。
 
yuge_motion-thumb-355x491-212
 
ディフォルトの位置から湯気画像をanimationで動かしています。それの繰り返しで湯気が立っています。
こういうやり方もあるのですね。そのままというかシンプルというか、湯気に見えるのでOKだと思います。
湯気が切れてなければなお良かったと思いました。
 
コメントアウトされているyuge4とyuge5があるといい感じになるのでしょうか。

ページの先頭へ