c4se記:さっちゃんですよ☆

.。oO(さっちゃんですよヾ(〃l _ l)ノ゙☆)

.。oO(此のblogは、主に音樂考察Programming に分類されますよ。ヾ(〃l _ l)ノ゙♬♪♡)

音樂は SoundCloud に公開中です。

考察は現在は主に Scrapbox で公表中です。

Programming は GitHub で開發中です。

重力崩壊! - JavaScript

実行すると画像要素が落っこちてHTMLが崩壊するブックマークレット
 http://veadardiary.blog29.fc2.com/blog-entry-1814.html

javascript:(function(){var d=document; var s=d.createElement("script"); s.charset="UTF-8"; s.src="http://tech.nitoyon.com/meltdown/meltdown.js?"+(new Date()).getTime(); d.body.appendChild(s)})();

HTMLを覆いかぶすようにFlashを配置して、JavaScriptで画像要素を渡して描画しているそうです。
原理わからなくても、楽しいですね。


destroy Flicker - c4se lunatic.faily


ワリオランドシェイクみたいに HTML が崩壊するブックマークレット(とそのソースコード) - てっく煮ブログ
 http://d.hatena.ne.jp/nitoyon/20080929/warioland_shake

FlashとJavaScript の連携で作り込んでます。

  • HTML を覆い隠すように Flash を 配置する。
  • JavaScript で HTML にある画像を列挙して、Flash に渡す。
  • Flash では、物理エンジン(Box2dFlashAS3)上に画像の位置に対応した箱を作成する。
  • HTML 内の全ての画像を消して、Box2dFlashAS3 による物理シミュレーションを開始する。


HTML崩壊 meltdown.js
 http://d.hatena.ne.jp/KAZUMiX/20071105/meltdown

注意点

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

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

作ってて気が付いたこと

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