きまぐれ事典

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

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

Tumblr

リンク

MONO

TAKUMI

木のかたまりが現在の時刻をお知らせします。

RECOMMEND

4861000084

Design rule index—デザイン、新・100の法則
William Lidwell, Kritina Holden, Jill Butler

フィボナッチの数列、フィッツの法則にオッカムの剃刀、5つの帽子掛けやらグーテンベルク・ダイヤグラムなどなど、デザインにまつわるキーワードがぎっしり詰まった本。必ずしも奇抜なセンスが必要なのではなく、しっかり基礎的ルールに基づけば自然と美しいデザインは生まれるもの。デザインに興味があるならばぜひとも本棚に。うーむ、いい意味で、本棚の肥やしとしてもサイコーの一冊。

410538502X

フル・ムーン
Michael Light

月旅行を体験できる本。人類初の月面着陸に成功したアポロ11号の宇宙飛行士たちが、興奮しながら目にしただろう月面の壮大で茫漠とした風景がそこにあります。記録写真というより、映画のひとコマのように思えるのは、宇宙飛行士たちのドラマを感じられるカットが散りばめられているからかな。月平線(?)から見える地球の出にも感涙。

B0007OC71O

In Between Dreams
Jack Johnson

アコースティックでナチュラルで、何の違和感もなく耳から浸透してくる心地よいメロディ。あまり聴きすぎると仕事が手に着かなくなる可能性があります。

PAGE TOP