ホーム >> 左脳Script >> Java Script >> わらわら逃げる文字達 ~逃げるリンク 再び~

わらわら逃げる文字達 ~逃げるリンク 再び~


あの逃げるリンクが、バージョンアップしました。
ウザさ3倍、重さ5倍です!

まずは、どれくらいウザくなったのかというと、コレくらい。
いやもうめっちゃ利く。
記憶力がすごくよくなる。
あの脳のなんとかってゲーム。
リンクがどうとかではありません。文字ベースの HTML記述 の殆どに適応できます。


使いかた

まずは、バラバラにしたい文章を含むタグにIDで名前を付けておいて下さい。

<div id="対象タグのID名">
リンクもバラバラに散開させる事が出来ます。<br>
ブログトップページへ→<a href="<$mt:blogurl$>"><$mt:blogname$></a><br>
<br>
逃げるリンクもリンクとしては機能します。リンクの元あった場所にある影は機能しません。<br>
</div>

「escAway2.js」を読み込み、<body>のonloadに以下のような記述をするだけ。

escAwayDividing("対象タグのID名");
onloadでなくても対象のタグが閉じたところで記述すれば動作はするハズです。

リンクもバラバラに散開させる事が出来ます。
ブログトップページへ→左脳Script

逃げるリンクもリンクとしては機能します。リンクの元あった場所にある影は機能しません。


従来のリンク文字列がそのまま(バラバラにならずに)逃げる物も使用できます。

escAway("対象タグのID名");

基本はHTML中の文章が対象ですが、<img>など、殆どのタグを「逃げる」対象に出来る・・・
ンですが、遁走開始の感知範囲をタグの物理サイズに比例した大きさにしているので、大きなタグを対象にすると、それほどマウスを近づけていないのに動き出してしまったりします。

また、意外と重いので、あまり沢山の文字を対象にするとブラウザが固まります。
特に Internet Explorer系 は重いので、ホドホドにしないとブラウザが固まる可能性もあります。


作成にあたって

苦労したのは以下2点。

  • 文字のズレ
    実は完全な解決をしていません。
    ブラウザの基本機能となる「拡大(Ctrl+"+")」「縮小(Ctrl+"-")」による文字の大きさ変更で、アラが見えるブラウザがあります。

    Google Chrome はアラがでない綺麗な表示になります。そういう意味では、以下のような順序に。

    Chrome(1.0.154.65) > safari(4.0-530.17) >> Internet Explorer(8) > FireFox(3.0.11 .NET CLR 3.5.30729)

    FireFox はずれ方にある程度の規則性があったので、対処しましたが。アラ自体は、まだ見えたりします。

  • エレメント座標の取得
    これは、割と後からわかった事なのですが(Internet Explorer でのテストを後回しにしていた為)Internet Explorer の破壊的な遅さに悩まされました。
    Java Script による「エレメント座標の取得方法」は、「offsetLeft、offsetTopプロパティ」の値を、offsetParent を辿って累積してゆく方法が、一般的?に知られています。
    しかし、Internet Explorer に関しては、この「offsetLeft、offsetTopプロパティ」からの値の取得が、なまら重いのです。

    IEだけ、(offset座標プロパティに関しては)ほかのブラウザの10倍~20倍ほど時間がかかっているようなのです。
    コレに関しては、コードやアルゴリズムの最適化等で「直接座標取得の速度を上げる」方法を諦め、座標取得の頻度を意図的に落とすで、対処しました。


ソース

一応フリーですが、一部引用した部分がありますので、気になる方はそちらも参考にして下さい。それなりにコメントの入ったソースjs と圧縮したjs を置いておきます。 圧縮自体は、YUI Compressor Onlineにて。

ソースコードダウンロード→escAway2src.zip
圧縮済みjsダウンロード→escAway2cmp.zip

2009年8月31日追記:逃げるHTML ~三度目の正直~」にて、ひとまずの最終?!バージョンを公開しました。IEでも動作するようになりました。


引用したコードについて。
HTMLにおける、色の記述からRGBを数値で抜き出すクラスを作ってあります。 そのコード作成において、以下のページを大変参考にさせて頂きました。

  • rgbcolor.js(http://www.phpied.com/rgb-color-parser-in-javascript/)
    カラーパーサー。英語。

  • 【JavaScript】各種色指定用の文字列を16進カラーコード(#xxxxxx)に変換
    fgColorってなんやのん?
    →ドキュメント(BODY)で使われる文字の色。らしい。読み込まれた後には変更できないとか書かれているものもある。
    →実は、これが上手く動かないので、結局カラーネームのある色をテーブルにした。


さいごに

何気なく読んでいる文章にマウスカーソルを近づけたら・・・わさわさとカーソルから文字が逃げ出した所で、何事かと思う事でしょう。Java Script でも、それなりにインパクトのある?こんなイタズらチックな物を作れます。

しかし、実際のところ、少々機能を削ってでも軽くしないと実用(なんの?)レベルにならない気もしていたりします。
もっと沢山の文字が、わらわら、わさわさ、うじゃうじゃ、と動いてくれるとよりインパクトがあると思うんですが(笑






ただし、悪用はしないようにくれぐれもお願いします。








トラックバック(1)

トラックバックURL: http://n-yagi.0r2.net/sanoupulurun/mt-tb.cgi/160

さて、">バラバラ遁走リンクのページを、Internet Explorer 又は、Opera などで閲覧されてしまった方には判ると思いますが、ページがスク... 続きを読む

コメントする

ホーム >> 左脳Script >> Java Script >> わらわら逃げる文字達 ~逃げるリンク 再び~

アーカイブ

このブログ記事について

このページは、n-yagiが2009年6月16日 18:07に書いたブログ記事です。

ひとつ前のブログ記事は「エレメントのスタイルを取得するには?」です。

次のブログ記事は「Adsense再・・・ついに申請受理!」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

Creative Commons License
このブログはクリエイティブ・コモンズでライセンスされています。