きまぐれ事典

ウェブデザイナーがあれこれきまぐれにつづる日々のくらしの百科事典。

HTML崩壊遊び

Posted on | 2008年 10月 1日 | Permalink

【崩壊】
(1)くずれること。こわれてしまうこと。
(2)〔物〕 不安定な素粒子が自発的に分裂して別種の素粒子に変化すること。また、不安定な原子核が放射線を放出したり自発的に核分裂を起こしたりして、別種の原子核に変化すること。原子核崩壊。壊変。

仕事柄いつもウェブページを作っておりますと、時に思うようにコーディングが進まず、あ”??っとなってメチャクチャにしちゃいたい気にもなるような、ならないような?

まあそうなるかは別として、ちょっと面白いものを見つけました。HTMLが崩壊したように見せるギミック。ブックマークレットにしておいて壊したい好きなページでクリック実行。するとあら不思議。そのページの画像という画像が重力に従い崩落していくではありませんか。

HTML崩壊

これ、「てっく煮ブログ」さんで作成、紹介されていたものです。物理法則に従って落下してバウンドするimg要素たち。なんとも見ていて愉快だと感じる私はストレスがたまっているのかしら…。

ただ興味のある方、日頃の鬱憤がたまっている方、破壊王の方はとりあえずお試しください。やり方は簡単。壊したい好きなページを開いておいて、以下のソースコードをブラウザのアドレスバーにコピペして実行してみてください。

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

ブックマークレットとして使いたい場合は、ブックマークバーに上記ソースを登録するだけ。Safariの場合、適当なページをブックマークして、名前を適当に変更、URLのところを上記ソースに変更してあげればできあがり。これで壊したいページはクリックするだけでバラバラに(笑)。

ちなみにこれの仕組み、ページ全体にFlashが覆っていて、JavaScriptで画像要素を渡して表現しているんだとか。ちなみのちなみに、背景として指定されている画像やFlashは崩壊しません。とにかくお試しあれ。

関連する(かもしれない)記事

コメント

2 コメント - “HTML崩壊遊び”

  1. GUERLAIN
    2008年 10月 1日 @ 23:40

    早速実行しました
    楽しいですね 画面をスクロールするとそれに合わせて上下して跳ねるんですね その度に落ちる場所が違くて
    また良いものを教えていただきました
    楽しい?

  2. TACA
    2008年 10月 2日 @ 01:03

    >GUERLAINさん
    おお、お試しくださいましたかー。
    Webネタに絡んでくださりありがとうございます(笑)
    バラバラ落ちて行ってはねたりぶつかったり。
    物理法則のシュミレーションなのでなかなかリアルです。
    落ちた画像をドラッグして投げたりもできますよ。

コメントをする





CAPTCHA


書いてる人

taca

taca。1978年生まれのB型。ウェブ制作のお仕事をしています。MacユーザーでiPhoneユーザー。写真を撮るのが好き。BBQをこよなく愛しますが、やむを得ない場合はホットプレートでの焼肉でも可。[profile...]

Instagram

リンク

PAGE TOP