An HTML5+CSS3 fan of お父さん扇風機
Ruby
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
public
raw
.gems
README.md
app.rb
config.ru

README.md

DogFan - tamakinotosan fan ( お父さん扇風機 ) in HTML5 + CSS3

This is a small toy which is the recreation of the lovely Tamakinotosan fan appears in the softbank CM, in HTML5 and CSS3

Since this is designed to host in heroku, so it is wrapped as Sinatra app. If you are interested in the html and css code used in this project, simply go to public/index.html for the code.

Feature

  • Electricity: Click the plugs to turn on the fan.
  • Tamakinotosan: You will hear his voice after the fan turned on
  • 3-level Speed: You can change the speed of the fan. 3 is the fastest and 1 is the slowest.

Browser Support

Only Support Webkit (Safari and Chrome) in this moment.

I will support Firefox 5 in coming day, but there is no plan for firefox4 or IE right now.

Known Issues

iOS can't play the sound

license

MIT.

Please kindly keep the credit of contributors.

Note for fork / Hosting

Just Pick everything under public/

IMPORTANT: Please kindly remove the google analytic code in head

p.s. If you fork or host your own version of fan, please kindly contact @evenwu , he is making a list of Tamakinotosan fan

Special Thanks

  • @sillyleo, the one who make the graphic prototype of fan
  • @evenwu, the one who make the PSD version of this fan and allow everyone use it.
  • @hlb, the sound provider

...and many twitterer who give the feedback on this toy.

Contact

You can find me on twitter, @vincicat or Blog 貓箱

Welcome comment or feedback~


Dogfan - HTML5+CSS3的「 お父さん扇風機 」

這是將日本軟銀廣告出現過的「 お父さん扇風機 」(爸爸風扇)用HTML5+CSS3再現的小玩意。

因為一開始是放在Heroku上所以打包成一個Sinatra App (但裡頭沒多少Ruby XD)。相關的Code都在public/index.html,有興趣可以自行研究。

特點

  • 電力發動: 所以要接插頭開風扇 (點一下插頭就會動)
  • お父さん: 把風扇開起來就會聽到牠的叫聲喔~
  • 三段變速: 可以改變風扇的速度。3最快1最慢

支援的瀏覽器

Webkit系的Safari和Chrome

將來會有FF 5。FF4或IE則是不知何年何日...

已知問題

iOS的聲音不出來。orz

授權

MIT

敬請保留credit

fork和hosting的注意事項

你只要copy public/ 的東西就好了

** 重要事項: 請把 head 的 google analytic的code移除 **

p.s. 如果你fork了這個repo或者自己做了改版可以聯絡 @evenwu ,他在做お父さん風扇列表...

特別鳴謝

  • @sillyleo, 風扇圖的原型的作者
  • @evenwu, 巨大版風扇+PSD檔的作者 (很偉大的任人惡搞)
  • @hlb, 音效提供

...以及Twitter(以及plurk)上提供意見的各位

聯絡

你可以透過Twitter ( @vincicat ) 或 Blog 貓箱 找到我。

歡迎各位提供意見~