HTML5であの花のEDを再現してみた

2011-08-11

■HTML5であの花のEDを再現してみた

今更だけどあの花、面白かったわ～。

あの花っていうのは「あの日見た花の名前を僕達はまだ知らない。」っていうアニメね。

途中までスルーしてたんだけどある時見てからはまった。最後はいい年して涙腺崩壊 (T_T)

まどか厨には申し訳ないけど今年のアニメ No.1はあの花で決まりだね！

あの花のEDがすごい好きで(OPも好き)、アニメ見るとOP,EDは飛ばしがちなんだけどこれは全部見てた。

曲はZONEのカバー曲『secret base～君がくれたもの～(10 years after Ver)』

歌詞に出てくる10年後が今年っていうのが(・∀・)ｲｲ!!

花が落下しながらサビの手前でズームアウト後に上昇っていう演出もｄ(・∀・)Good !

で、これhtmlで再現できそうだな～と思って作ってみることにした。

htmlは初歩しか分からないので使えそうなコードを拾ってきて

分からない所は2chで教えてもらいながら制作することに…

Canvasを使いたかったんだけど難しそうなので諦めて違う方法でやってたら

なんと数日後に1から Canvasを使って作ってくれた人が現れました！超嬉しい！

その後も自分なりに修正して3通りのバージョンが出来ました。

メジャーブラウザに対応してるけどChrome推奨。

Canvas版
http://zz.x0.com/anohana/canvas.html
Canvasを使って花を表示しています。

Web フォント版
http://zz.x0.com/anohana/font.html
フォントに花を追加して表示させてます。

png版
http://zz.x0.com/anohana/png.html
画像で花を表示。html5に対応していないIE用。