Hatena::ブログ(Diary)

KAZUMiX memo

2007-11-05

HTML崩壊 meltdown.js

| HTML崩壊 meltdown.jsを含むブックマーク

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)})();

これを適当なページのアドレスバーに貼り付けて実行すると、そのページが崩壊します。リロードすれば元に戻ります。

なんだかよく分からないという方は、以前作った「IIJ4Uサービス終了のお知らせ」に、崩壊リンク(★バルス★)を追加しましたのでお試しを。ちなみにそのリンクはブックマークレットの登録にも使えます。

本体ソース
meltdown.js

注意点

  • ページ内の要素が多ければ多いほど崩壊アニメーションが始まるまでに時間がかかります
  • 基本的に下から崩れていくので、長いページの場合は一番下までスクロールした状態で実行した方が面白いです
  • アニメーション開始時に、若干崩れてるのは仕様です。(全要素を position:absolute; にしてる)
  • もしかしたらブラウザがクラッシュすることがあるかもしれません

ブラウザごとのパフォーマンスの違い

重いページで実行した場合、アニメーションが始まるまでの時間は概ね Opera, Firefox, IE の順で速いです。しかし、アニメーションが始まってからは IE, Firefox, Opera と逆の順でスムーズです。特に IE が予想以上にスムーズでびっくりした。

作ってて気が付いたこと

Firefox の tbody 要素は親の table を親と思ってくれなくなる場合があるようです。テーブルレイアウトのページでこの崩壊スクリプトを実行した場合、Firefox だと最初からおかしな表示になることがあるのはそのためです。

関連エントリー

映画「ハプニング」ブログパーツ・プレビュー

*1iGoogleは重いのでホームの方

LiosKLiosK 2007/11/07 16:42 随所に見られる
height1 > height2 ? height1 : height2
のような書き方は、
Math.max(height1, height2)
にできそうですね。

KAZUMiXKAZUMiX 2007/11/07 22:45 LiosKさんありがとうございますっ
さっそく修正しました!

kurakura 2007/11/08 15:57 面白い!あちこちで使って喜んでます。
でも、Bookmarklet の名前はバルスが良いですね。

etupirkaetupirka 2007/11/08 17:55 はじめまして。さっそく頂いて、自サイトのメニューに紛れ込ませちゃいました。とっても楽しいです♪ ありがとうございました。

KAZUMiXKAZUMiX 2007/11/08 23:36 サンプルページの表現を「バルス」にしときました。
メニューに紛れ込ませるってのは面白いですねw

kinnekokinneko 2007/11/09 13:26 面白いですね。
利用にあたってのライセンスはなんでしょうか?

KAZUMiXKAZUMiX 2007/11/09 13:54 では、MIT で。

gozagoza 2007/11/09 21:22 すごい!面白いです!
私のブログで使わせていただきたいのですが、
http://ginbanyoku.blog67.fc2.com/
どこにリンクを貼れば良いでしょう?

marchmarch 2007/11/09 23:26 楽しめました!

KAZUMiXKAZUMiX 2007/11/10 02:49 gozaさん、クリックしたら崩壊するというリンクを追加したいというのであれば、サンプルページのバルスと同じようにリンクすればOKです。

gozagoza 2007/11/10 10:35 あ、どうも勘違いしてたみたいです。なんでもありませんでした。コメント覧のとこに使わせていただきます。。。

CecilchanCecilchan 2007/11/11 15:33 面白すぎる
早速使わせていただきます

DanieleDaniele 2007/11/15 16:27 面白いです!ブログからリンクを貼らせて頂きました。問題があれば仰ってください。よろしくお願いします☆

kurupikurupi 2007/11/29 21:29 面白い!
自分のホームページにも仕掛けてみます^^
ふふふ。。

jimmyjimmy 2007/12/16 23:23 すみません、このスクリプトをローカルに保存して実行しようとすると、XPSP2以降では外部から.jsファイルを読み込む為、警告がでてしまうので、HTMLファイルのheadに.jsファイルの中身を組み込んでbody内にmeltdownを呼び出すリンクを張って使いたいのですが、どのようなリンクを張ればよいのでしょうか。(外部からmeltdown.jsを呼び込むのではなくHTMLファイルの中に埋め込んで使いたいのですがどのようにしたらよいのでしょうか。)宜しければ教えてください。

KAZUMiXKAZUMiX 2007/12/17 10:38 その場合には以下の改造で対応できます。
・現状の meltdown.js は読み込まれたら即実行のため、本体を呼び出されたときに実行される普通の名前付き関数として定義する。
・リンクからその関数を呼び出す。
以上、チャレンジしてみてください。

jimmyjimmy 2007/12/18 01:48 出来ました!ご指摘どうもありがとうございます。

NmaQNmaQ 2008/03/09 18:19 最高です!!
紹介させていただきました★

やっさんやっさん 2008/10/12 23:34 ニコニコからきました
最高です!

ブログのネタにさせていただきました

ミーミー 2009/02/21 17:52 質問です。
崩壊終了後に違うページorサイトにジャンプさせたい場合は、
Meltdown.jsのどの部分を改良すればいいのでしょうか。

KAZUMiXKAZUMiX 2009/02/21 19:01 それでしたら、meltdown2.jsの方を利用してください。崩壊終了後、逆再生する処理を呼び出すために以下のようになっている部分があります。

alert('Reverse!');
meltdownReverse();

ここに代わりの処理を入れればオッケーです。

ヤーナヤーナ 2009/05/18 00:09 FC2ブログのプラグインで共有プラグインで登録したいのですが使っちゃっていいでしょうか?
私のHPの下の方にあるやつみたいな感じでやろうと思っているんですけど?

KAZUMiXKAZUMiX 2009/05/18 19:14 このスクリプトは MIT License としていますので、それに反しなければ自由にご利用いただけます。

ミーミー 2009/06/04 21:02 前回の対応ありがとうございました。
ここでまた質問なのですが、

外部JavaScriptから1,2,3を呼び出したいのですが、
呼び出す引数はどうすればいいのでしょうか。
もしよろしければ対応よろしくお願いいたします。

takuyarei0takuyarei0 2010/03/31 00:23 新しいタブを開いたときのナビゲーションページで使用したら画像がすべて(?)になった

↑追記↑追記 2010/03/31 00:26 googleでやったらスクリプトエラーが発生した後(左下に!マーク)崩れた

↑さらに追記↑さらに追記 2010/03/31 00:30 面白かったので上のバーに追加しました。ww

eikingeiking 2010/04/01 23:21 Yahooブログの記事にクリックしたら崩壊するようにしたいんですが
まったくわかりません・・・
どうやるのか教えていただきませんか?

(´・ω・`)(´・ω・`) 2011/06/12 00:33 Internet Explorer は、クロスサイト スクリプトを防止するために、このページを変更しました。


となりできません。
解決策お願いします。

小6きさぴー小6きさぴー 2012/05/29 21:15 友達に聞いてきました。
楽しい!
あのもっと広めてもいいですか?

トラックバック - http://d.hatena.ne.jp/KAZUMiX/20071105/meltdown