2007-11-05
HTML崩壊 meltdown.js
PC | 
- 2008年12月29日追記
- 逆再生する新バージョン「HTML崩壊Reverse! meltdown2.js」をアップ
- 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)})();
これを適当なページのアドレスバーに貼り付けて実行すると、そのページが崩壊します。リロードすれば元に戻ります。
なんだかよく分からないという方は、以前作った「CSSをURIのクエリーで切り替えるJavaScript 他、動作サンプルページ | KAZUMiX memo」に、崩壊リンク（★バルス★）を追加しましたのでお試しを。ちなみにそのリンクはブックマークレットの登録にも使えます。
- 本体ソース
- 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を採用したブログパーツ （↓動作デモ）
トラックバック - http://d.hatena.ne.jp/KAZUMiX/20071105/meltdown
- WEB開発日記 - HTML崩壊 meltdown.js - KAZUMiX memo
- Webアプリを作ろう - 11/06 scrap
- 香里奈か副産物 - 崩れ
- オムライスの日記 - HTML崩壊が崩壊する！！！！
- [Django][Python][jQuery][CSS][senna][その他]巡回
- JDKA07_lynxeyed - HTML崩壊 meltdown.js
- 泣いて謝るのはこっちでした。 - Web崩壊
- [Web][Gadget] めるとだうん：これってオモシロすぎる
- Pasosavi はてな
- [十字架]天地の崩れ方を、見て見たい？（笑・まだ言うか）
- ようじのにっき - HTML崩壊！
- 貓Blog解體危機
- kinneko@転職先募集中の日記 - HTML崩壊 meltdown.js
- 【NEWS】ビートたけし、韓国により韓国系文化人と認定！etc...
- ヘビースモーカーの喫煙所【特撮を見ながらタバコを吸おう】 - HTML...
- コーヒーにはCreapを入れないと - meltdown
- くらげのChangeLog - HTML崩壊 meltdown.js - KAZUMiX memo
- YKの日誌 - 明日体育か(’A`)
- ある二宮ひかるファンの日記 - つぶやきその8
- バルス！
- Webぺージ崩壊JavaScript
- 多事総論 - @後期52
- HTMLを崩壊させるJavaScript
- Webページを崩壊させる
- another diary
- MIXTURE無償版公開・muzie・HTML崩壊meltdown.js・Googleイメージク...
- 僕の左手に、手を乗せて
- ページが崩れ落ちていく meltdown.js
- KAZUMiX memo - なんでもドラッガー fukuwarai.js
- KAZUMiX memo - Firefoxユーザーは食いつきがいい？
- WoooFla@Blog - 人気の鍵を握るはFireFoxユーザー？
- HTML崩壊！またの名を「バルス！」( ゜д゜)ポカーン
- tkikumotの日記 - バルス！
- 日々思うこと。考えること。 - プログラムは魔法ｗ
- 偏った言語信者の垂れ流し - wsgicontainerのデモムービー2
- メルトダウン
- KAZUMiX memo - 何かが起きる！映画「ハプニング」のブログパーツ
- まったくハプニング
- てっく煮ブログ - ワリオランドシェイクみたいに HTML が崩壊するブ...
- 崩壊ボタン設置しました
- 将棋の神様〜０と１の世界〜 - ワリオランドPR動画を見てインスパイ...
- ■
- なんかいろいろ らぼらとりー - 一本取られた
- toLight!のときどき光るブログ - HTML崩壊ＤＡ！
- グロウリイデイズ - 10月23日の寝る前に見たリンク集
- 画面崩壊 javascript
- KAZUMiX memo - HTML崩壊Reverse! meltdown2.js
- Ornitier’s Status Quo - リンク大放出
- コナミコマンド
- 海猫放浪記 - ページが崩壊していく効果を演出するJavaScript「melt...
- 「バルス!!」の実装。
height1 > height2 ? height1 : height2
のような書き方は、
Math.max(height1, height2)
にできそうですね。
さっそく修正しました！
でも、Bookmarklet の名前はバルスが良いですね。
メニューに紛れ込ませるってのは面白いですねｗ
利用にあたってのライセンスはなんでしょうか？
私のブログで使わせていただきたいのですが、
http://ginbanyoku.blog67.fc2.com/
どこにリンクを貼れば良いでしょう？
早速使わせていただきます
自分のホームページにも仕掛けてみます＾＾
ふふふ。。
・現状の meltdown.js は読み込まれたら即実行のため、本体を呼び出されたときに実行される普通の名前付き関数として定義する。
・リンクからその関数を呼び出す。
以上、チャレンジしてみてください。
紹介させていただきました★
最高です！
ブログのネタにさせていただきました
崩壊終了後に違うページorサイトにジャンプさせたい場合は、
Meltdown.jsのどの部分を改良すればいいのでしょうか。
alert('Reverse!');
meltdownReverse();
ここに代わりの処理を入れればオッケーです。
私のHPの下の方にあるやつみたいな感じでやろうと思っているんですけど？
ここでまた質問なのですが、
外部JavaScriptから1,2,3を呼び出したいのですが、
呼び出す引数はどうすればいいのでしょうか。
もしよろしければ対応よろしくお願いいたします。
まったくわかりません・・・
どうやるのか教えていただきませんか？
となりできません。
解決策お願いします。