HTML崩壊 meltdown.js
- #ff0000">2008年12月29日追記:逆再生する新バージョン「HTML崩壊Reverse! meltdown2.js」をアップ
- #ff0000">2009年4月21日追記:さらに進化したバージョン「HTMLの暴走(meltdown3)」をアップ
まずは軽いページでお試しください。例えば Google とか。*1
javascript:(function(){var s=document.createElement("script");s.charset="UTF-8";var da=new Date();s.src="http://www.rr.iij4u.or.jp/~kazumix/d/javascript/meltdown/meltdown.js?"+da.getTime(); document.body.appendChild(s)})();
なんだかよく分からないという方は、以前作った「http://www.rr.iij4u.or.jp/~kazumix/d/javascript/switchCss/」に、崩壊リンク（★バルス★）を追加しましたのでお試しを。ちなみにそのリンクはブックマークレットの登録にも使えます。
- 本体ソース
- meltdown.js
注意点
- ページ内の要素が多ければ多いほど崩壊アニメーションが始まるまでに時間がかかります
- 基本的に下から崩れていくので、長いページの場合は一番下までスクロールした状態で実行した方が面白いです
- アニメーション開始時に、若干崩れてるのは仕様です。（全要素を position:absolute; にしてる）
- もしかしたらブラウザがクラッシュすることがあるかもしれません
ブラウザごとのパフォーマンスの違い
重いページで実行した場合、アニメーションが始まるまでの時間は概ね Opera, Firefox, IE の順で速いです。しかし、アニメーションが始まってからは IE, Firefox, Opera と逆の順でスムーズです。特に IE が予想以上にスムーズでびっくりした。
作ってて気が付いたこと
Firefox の tbody 要素は親の table を親と思ってくれなくなる場合があるようです。テーブルレイアウトのページでこの崩壊スクリプトを実行した場合、Firefox だと最初からおかしな表示になることがあるのはそのためです。
関連エントリー
- iPhoneのタッチスクリーンを再現するブックマークレット（脂） - KAZUMiX memo
- HTMLの暴走 (meltdown3) - KAZUMiX memo
- なんでもドラッガー fukuwarai.js - KAZUMiX memo
こちらはページ内の要素を手動でぐりぐりドラッグできます - 何かが起きる！映画「ハプニング」のブログパーツ - KAZUMiX memo
meltdown.jsを採用したブログパーツ （↓動作デモ）
