HTML崩壊 meltdown.js - KAZUMiX memo

久し振りにソーシャルブックマークを整理していたら、ブログに書こうと思って忘れていたものを見つけました。
その名は「バルス」で、その名の通りバルスするわけですが…。

とりあえず、これを押してみてください。
バルスし終わったらリロードしてください。
日刊にしこり－埼玉版－をバルスする


因みにこのJavaScript実行URLをブックマークしておけば、どのページでもバルスできます。


ブログの記事内にはる場合
<a href="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)})();">「バルス！」</a>
ブックマークレット(右クリックで「お気に入りに追加」)
「バルス！」

ブックマーク用URL(クォーテーションが全角なので半角にしてください。)
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)})();

因みに…

注意点

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

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

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

だそうです。

こういうツールは面白いから作りたいですが、想像力やどうやったら実装できるかなど、考えるのが難しいでしょうね。
そのうちやってみます。

• タグ
• JavaScript
• meltdown
• 崩壊