泡がいくつもあって消えていくっていうあれをやりたくてやってみました(作成時間5分)。
4月28日追記:jQueryを使わずにネイティブのみで動くように改善しました。ただ、カクつくようになってしまいました。ある意味改悪です。改善後 5月14日追記:速度などを調整したらなめらかになりました。カクついて見えたのはたまたまだったようです。どんなもの?
泡をどんどんjQueryで出してサイズをアニメーションで変化させているだけです。サンプルはこちらBubble(はじめにスペルを間違えていたことは秘密です)。
CSS3のborder-radiusを使っているため対応していないブラウザ(IE6やIE7やIE8やIE9など)はうまく表示されません。手元に非対応ブラウザがないのでわかりませんが多分四角形が浮かんできて消えます。
なにかのデザインに利用したくなりますね。また、これをgifアニメーションにして背景画像用にするのもいいかもしれません。gifアニメーションだったら処理も少なくて済みますし。
終わりに
最近こういうのを作るのが楽しくなって来ました。というかこういうのしかやってませんね。でも、ただツールを作るのとはちがう面白さがくせになります。みなさんも一度やってみてはいかがでしょうか?
