タグ

ブックマーク / kazumix.hatenablog.com (5)

  • 面白いだけで役に立たないUI - KAZUMiX memo

    できたよー javascript:(function(d,s){s=d.createElement('script');s.type='text/javascript';s.src='http://www.rr.iij4u.or.jp/~kazumix/d/javascript/unusable.js?'+(new Date).getTime();s.charset='UTF-8';d.body.appendChild(s);})(document) 上記のコードをアドレスバーに貼り付けて実行すると、そのページが上下左右繋がった空間になり、スクロールバーで扱えなくなります。代わりにマウスカーソルでグリグリ動かせます。 ソース unusable.js 関連エントリー(ネタスクリプト) ものすごい勢いで横スクロールさせるJavaScript - KAZUMiX memo HTMLの暴走 (me

    面白いだけで役に立たないUI - KAZUMiX memo
    nitoyon
    nitoyon 2009/08/25
    マウスの位置に応じてスクロールする。うまく制御できない・・・!
  • JavaScriptを呼び出しまくるFlash(AS3)の内側 (「HTMLの暴走」解説 ActionScript編) - KAZUMiX memo

    HTMLの暴走(meltdown3)」における、Flash(ActionScript 3.0)側の解説です。 Flash側は次の様な流れになっています。 iframeや埋め込みFlashなど、動かせなかったり綺麗に動かそうとすると面倒な要素をJavaScriptから取得 上記要素がある場合、JavaScriptにその要素を非表示にするように指示すると同時にその位置にノイズのアニメーションを設置し、フェードアウトのアニメーションを開始させる 初音ミクなど、事前に用意した画像からランダムに画像を選択 選択された画像のピクセル数を計算(完全に透過の部分は除外) アニメーション対象のHTML要素数をJavaScriptから取得 画像化に必要なピクセル数とアニメーション対象要素数を比較し、画像化に必要な要素数に達していた場合は画像化演出に分岐 画像化演出の場合 画像化に不要な余り要素をまず画面外に

    JavaScriptを呼び出しまくるFlash(AS3)の内側 (「HTMLの暴走」解説 ActionScript編) - KAZUMiX memo
    nitoyon
    nitoyon 2009/05/01
    iframeやflashを隠す、Bitmap化してアニメーションする、ExternalInterfaceの罠、After EffectsのアニメーションをVector Magicでベクター化。
  • FlashでHTMLの文字を1文字ずつ操作するために使ったJavaScript側のトリック(「HTMLの暴走」解説 JavaScript編) - KAZUMiX memo

    先日の「HTMLの暴走(meltdown3)」においてJavaScript側で使った技の解説です。 通常JavaScriptで操作可能なHTMLの対象はタグ付けされた要素です。テキストであればPタグなどなんらかのタグで囲われた一連の文字列が対象になります。にもかかわらず「HTMLの暴走」では1文字ずつ操作しています。 どうやっているのか? 一文字ずつタグで囲ってるんです。実は。 例えば次の様に表示されている部分があったとします。 これを一文字ずつタグで囲った場合の状態を分かりやすく赤枠を付けると次の様になります。 こんな感じで一文字ずつタグ付けし、それぞれのタグの座標を計算して対応しているのです。 実際に使ったタグはSPANなどではなく、KZMというオレオレタグです。一般的なタグはデフォルトスタイルやCSSの影響がありえるため、適当なタグを作って対応しています。 HTML(XHTML)の定

    FlashでHTMLの文字を1文字ずつ操作するために使ったJavaScript側のトリック(「HTMLの暴走」解説 JavaScript編) - KAZUMiX memo
    nitoyon
    nitoyon 2009/04/27
    オレオレタグに1文字ずつ格納していく。ソースコード読むのに少し苦労していたのでコメントありがたい。
  • HTMLの暴走 (meltdown3) - KAZUMiX memo

    javascript:(function(d,s){s=d.createElement('script');s.type='text/javascript';s.src='http://www.rr.iij4u.or.jp/~kazumix/d/javascript/meltdown3.js?'+(new Date).getTime();s.charset='UTF-8';s.id='KM3';d.body.appendChild(s);})(document) 上記のコードをアドレスバーに貼り付けて実行すると、そのページが暴走を開始します。 ページによってはアニメーションが始まるまでちょっと待たされることがあるかもしれません。 色んなページで遊んでみてください。 アドレスバー貼り付けではなく、リンク動作の実験版 (実験)ブックマークレットをリンク先のページで発動させてみる - KAZUM

    HTMLの暴走 (meltdown3) - KAZUMiX memo
    nitoyon
    nitoyon 2009/04/22
    HTML崩壊。テキストが浮かび上がる。ソースあり。/ ←JavaScript で TextNode を1個ずつ追加しつつ座標取得してるのかな。ひー。
  • HTML崩壊 meltdown.js - KAZUMiX memo

    #ff0000">2008年12月29日追記:逆再生する新バージョン「HTML崩壊Reverse! meltdown2.js」をアップ #ff0000">2009年4月21日追記:さらに進化したバージョン「HTMLの暴走(meltdown3)」をアップ まずは軽いページでお試しください。例えば Google とか。*1 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)})(); これを適当なページのアドレスバ

    HTML崩壊 meltdown.js - KAZUMiX memo
    nitoyon
    nitoyon 2007/11/08
    HTMLが崩壊するブックマークレット。全エレメントをいったんabsoluteにしてからアニメーションさせている。
  • 1