実行すると画像要素が落っこちてHTMLが崩壊するブックマークレット
http://veadardiary.blog29.fc2.com/blog-entry-1814.html
javascript:(function(){var d=document; var s=d.createElement("script"); s.charset="UTF-8"; s.src="http://tech.nitoyon.com/meltdown/meltdown.js?"+(new Date()).getTime(); d.body.appendChild(s)})();
HTMLを覆いかぶすようにFlashを配置して、JavaScriptで画像要素を渡して描画しているそうです。
原理わからなくても、楽しいですね。
ワリオランドシェイクみたいに HTML が崩壊するブックマークレット(とそのソースコード) - てっく煮ブログ
http://d.hatena.ne.jp/nitoyon/20080929/warioland_shake
FlashとJavaScript の連携で作り込んでます。
- HTML を覆い隠すように Flash を 配置する。
- JavaScript で HTML にある画像を列挙して、Flash に渡す。
- Flash では、物理エンジン(Box2dFlashAS3)上に画像の位置に対応した箱を作成する。
- HTML 内の全ての画像を消して、Box2dFlashAS3 による物理シミュレーションを開始する。
HTML崩壊 meltdown.js
http://d.hatena.ne.jp/KAZUMiX/20071105/meltdown
注意点
ページ内の要素が多ければ多いほど崩壊アニメーションが始まるまでに時間がかかります
基本的に下から崩れていくので、長いページの場合は一番下までスクロールした状態で実行した方が面白いです
アニメーション開始時に、若干崩れてるのは仕様です。(全要素を position:absolute; にしてる)
もしかしたらブラウザがクラッシュすることがあるかもしれません
ブラウザごとのパフォーマンスの違い重いページで実行した場合、アニメーションが始まるまでの時間は概ね Opera, Firefox, IE の順で速いです。しかし、アニメーションが始まってからは IE, Firefox, Opera と逆の順でスムーズです。特に IE が予想以上にスムーズでびっくりした。
作ってて気が付いたこと
Firefox の tbody 要素は親の table を親と思ってくれなくなる場合があるようです。テーブルレイアウトのページでこの崩壊スクリプトを実行した場合、Firefox だと最初からおかしな表示になることがあるのはそのためです。