Hatena::ブログ(Diary)

KAZUMiX memo

2008-12-29

HTML崩壊Reverse! meltdown2.js

| HTML崩壊Reverse! meltdown2.jsを含むブックマーク

meltdown2.js 動作デモ

今度は崩壊終了後に逆再生して元に戻ります。

javascript:(function(d,s){s=d.createElement('script');s.type='text/javascript';s.src='http://www.rr.iij4u.or.jp/~kazumix/d/javascript/meltdown2.js?'+(new Date).getTime();s.charset='UTF-8';d.body.appendChild(s);})(document)

これを崩壊させたいページのアドレスバーに貼り付けて実行すると、そのページが崩壊します。その後、逆再生して元に戻ります。

要素がたくさんあるページで実行すると面白いと思います。Yahoo! JAPANとか。

本体ソース
meltdown2.js

前作からの改良点

  • 逆再生します
  • 大幅にパフォーマンスアップ。今回は実行と同時にアニメーションが開始します
  • アニメーション開始時にブラウザによってレイアウトが崩れることはほぼなくなりました

なんで作ったか

前作のソースを眺めていたら今の自分からみて「これはねーよ」という部分が多くて作り直したくなったため。単なるリファクタリングだけじゃ面白くないので、ついでに逆再生機能も追加しました。

関連エントリー

ニコニコ大好き人間ニコニコ大好き人間 2008/12/30 11:11 このスクリプトすごいですね!
早速ニコニコ動画で公開しました。
何か問題があったら言ってください。
すぐ消しますので。

ニコニコ大好き人間ニコニコ大好き人間 2008/12/30 11:18 今、ミク鉄道のやつに宣伝してきました。

KAZUMiXKAZUMiX 2008/12/30 15:48 ども。特に利用制限は無いので自由に遊んでください。
自分のページのリンクに仕込むのもよしです。
(MIT License)

ヘケケヘケケ 2009/01/13 20:48 meltdown.jsをちょこっといじって使いたいのですが、
MIT LicenseですとjsにCopyrightがあれば大丈夫でしょうか?

KAZUMiXKAZUMiX 2009/01/13 22:31 はい、それで問題ありません。
使ってるページからここにリンクする必要もありません。
でも面白い改造が出来たら教えてもらえると嬉しいです。

ヘケケヘケケ 2009/01/15 15:20 KAZUMiXさま
ありがとうございます。
HALLSスッキリ検定というサイトのブログパーツで
使わせていただきました。
また素敵なJS見せてください!
(ヘタに広告になるコメントでしたら、削除してください)

KAZUMiXKAZUMiX 2009/01/15 23:24 スッキリ感がよかったですヨ。
すごい余計なお世話かもしれませんが、タグ2つ貼り付けるより、その2つのタグを吐き出すスクリプトのタグ1つにすればよりスッキリしてよかったかもしれません。

macomaco 2009/03/28 02:00 KAZUMiXさま
楽しいスプリクトの公開有難うございます!
ページロードと同時に崩壊させてみたいのですが、やり方がわからず…。もしよろしければ、デモで使用されているstartmeltdown2.jsを少し書き換えて使わせていただいてもいいでしょうか…?(ライセンス明記します)
よろしくお願いします。

KAZUMiXKAZUMiX 2009/03/28 14:24 ロードと同時に崩壊させるstartMeltdown2.jsですが、これはそのページのURLに startMeltdown2 という文字列が含まれている場合にmeltdown2.jsを呼び出して発動させるようになっています。
問答無用で発動させる場合はそのチェック(最初のif文)をすっとばせばオッケーです。
書き換えての使用も問題ありません。

つべるつべる 2009/04/02 12:15 崩壊系のスクリプトをブログに使わせていただきますね。
とてもおもしろいです。

kuniteccyankuniteccyan 2010/11/12 23:16 Kazumixさん
僕のブログで紹介しました
www.ameblo.jp/kuni-teccyan/

RenpeiRenpei 2010/11/13 08:24 凄い気持ちいいwww

実況者A実況者A 2013/08/03 00:06 ヤフーのバルス祭りで使われてますよwww
http://www.yahoo.co.jp/promotion/bals/
http://k.yimg.jp/images/top/js/promotion/meltdown2.js

トラックバック - http://d.hatena.ne.jp/KAZUMiX/20081229/meltdown2