あの花ED風のエフェクトを作った

Javasrcipt


javascriptで遊んでみた。
あの花びらが散るエフェクトが気に入ってたので、ブラウザ上で再現できたら
面白いなと思ってました。
できたのがこれ。
sample:http://ufssf.net/flower.html
https://github.com/ufssf/anohana
chrome,firefox,safariで動作確認済み。IE9で動くかもしれない。
http://plugins.jquery.com/project/snowfallを改造して作りました。
主要な追加点は、

  • div要素ではなくimgを動かす
  • CSS3のTransformを使用して画像を回転させる

画像を回転させる部分のコードを抜粋するとこんな感じ。
ブラウザごとに独自のTransformがあってよく分からない･･･

this.ang = 'rotate('+this.y*this.rspeed+'deg)';
this.element.style.mozTransform = this.ang;
this.element.style.msTransform = this.ang;
this.element.style.webkitTransform = this.ang;
this.element.style.transform = this.ang;

花びらの枚数を可能な限り多くしたかったのだけれど、高速化は断念。
コードぐちゃぐちゃだからもっと早くなる余地はあるかも。へるぷみー。