◇ list ◇ Skipup Navi ◇ jump ◇
DHTML

DHTML

はじめに

ここに置いてあるもの全て、OS が Windows2000、ブラウザが Internet Explorer 5 , Netscape 4.7 , Netscape 6 で正常に動作することを確認しています。特に断らない限り、これらの環境で動作します。
ちなみにまだまだ、未完成です(^^);。このページの内容が一変するかと思います。

Material

実用的なものを紹介します。ソースは初心者の方でも簡単にカスタマイズ出来るよう心掛けて作成しているつもりです。殆どのサンプルはカスタマイズ可能ですが、カスタマイズする個所はコメントしているところのみです。それ以外は変更しないで下さい。そのため、コメントも最小限のことしか書いていません。
尚、解説等のページは設ける予定は今のところありません。カスタマイズ方法についてはソースに書いているので、そちらを参考にして下さい。それ以外で「これは何を行っているの？」などの質問にはその都度答えたいと思います。
そして、勿論、外部ファイルは使用していません。ソースをそのまま貼り付ければ使用できます。画像などが必要な場合は御自分で作成して頂くか、ここでダウンロード出来るものを使用して下さい。
尚、ソースを理解する上では外部ファイルを使用したものの方が分かり易い場合がありますので、そちらも用意しておきます（外部ファイルについては Class Library を参照 のこと）。
リクエスト受け付けます。メール かBBS等に書き込みして下さい。
あなたのサイトで使って頂ければ幸いです。

FollowMouse [ 外部ファイル使用 ] [ 画像を含むファイルのダウンロード ]
マウスに追従して動きます。サンプルは画像を用いたものですが、ソースの値を変更することで、これが テキスト形式 にも、レイヤー形式 にも出来ます。ちなみに一番、労力が少なくてすむのはレイヤー形式です（笑）。御自分の好きなようにカスタマイズして使用して下さい。

Trash

以下のサンプルは何らかの大掛かりなものを作成する上でテスト的に作成したもの、もしくは実験的に作成したものが殆どです。 それ故、SCRIPT はかなり粗雑に構成されています。解説等はしていませんのでご了承下さい。 下に行くほど手の込んだものが多くなる傾向にあります。順不同。 尚、外部ファイル（Arith, Dimension, Point3, Gradation, Client, Element, Action クラス , Class Library 参照）を使用しており、単独では動作しないものが殆どです。 これらの中で Material に追加して欲しいものがあれば言って下さい。
  1. imageswitch010514 : ワイプで画像を入れ換えてみる
  2. contentselect010420 : 拡大したように見せて選択
  3. contentselect010421 : にょろにょろしながら、拡大したように見せて選択(IEの場合、まじ拡大)
  4. contentselect010422 : 閉じて開く！みたいな
  5. contentselect010423 : こんな風に表示されるのもたまにはいいのでは？ 良い子は真似しちゃ駄目です。笑
  6. Bubble & Fireworks : 泡と花火、IE 以外だとフリーズするかも・・・(^^);
  7. Blink : 点滅。どこにでもあるやつ
  8. lasereffect010511 : レーザーを効果的に使ったもの
  9. lasereffect010512 : レーザーを効果的に使ったもの
  10. lasereffect010513 : レーザーを効果的に使ったもの
  11. lasereffect010514 : レーザーを効果的に使ったもの
  12. lasereffect010515 : レーザーを効果的に使ったもの
  13. lasereffect010516 : レーザーを効果的に使ったもの
  14. Cross Line : 十字のエレメントがマウスに追従するという、どこにでもあるやつ
  15. The beat of the heart : 心臓の鼓動
  16. Rotator : 回ってます。三角関数、DHTMLアニメーションの基本
  17. Rotator(followmouse) : ↑のマウス追従バージョン
  18. Untitled 000626 : むか〜し、作ったやつですな。作り方下っ手くそです。
  19. Untitled 000628 : 上のにほんのちょっと手を加えたもの
  20. Untitled 000629 : 半分は逆回転。実をいうとコード部分は上のものと殆ど変わらない。NT 推奨。
  21. Fade Background Color : 背景色のフェード。あんまりやると気持ち悪くなります
  22. Path : 軌跡を残しながら移動
  23. Path(followmouse) : ↑のマウス追従バージョン
  24. Flower : 一応、花のイメージ
  25. Target : ↑のをちょこっといじっただけ
  26. Rain : 雨
  27. Space 1 : 宇宙。↑のを横方向にしただけじゃないよ。ホラホラ遠近感が・・・分からない？
  28. Space 2 : 宇宙。パパパっと光る。
  29. Powdery Snow : 舞う粉雪
  30. Snowstorm : 吹雪。手抜き
  31. Line : DHTML の弱点、斜めラインの生成。このスクリプトが活かせるようになるのは５年後でしょう（笑）。回転途中で中心が微妙にずれるのはご愛嬌。NT 推奨。
  32. Hexagon : 六角形。メニュー形式にしようと思ったが、ダルいので終了
  33. Octagon : ↑の八角形バージョン
  34. Quadrangle : 順番が逆になったけど、四角形バージョン。これ３次元っぽくないですか？光源を意識してみた。
  35. Ring 0 : ＺＸ平面で輪を作って、Ｘ軸で回転させたもの。これを基本にしてちょっとずつ手を加えていくと面白い動きが作成できる。ＹＺ平面Ｙ軸回転
  36. Ring 1 : ２つ合わせて、片方はＸ軸回転、片方はＹ軸回転。
  37. Ring 2 : ３つ。もう一つ。NT 推奨。
  38. Ring 3 : ２軸を同時に回転させたもの。NT 推奨。
  39. Ring 4 : 球状の螺旋なり。NT 推奨。
  40. Ring 5 : ↑のでパラメータ変更化。NT 推奨。
  41. WebRing : WEB Ring バナー用に動作テストしたもの。これも 3D を意識。
  42. WebRing 1 : 手ぇ抜き過ぎ！何がしたいのか自分でも分かりません。とかいいつつ、これに嵌りそうです（楽）
  43. WebRing 2 : ん〜なんとも・・・。NT 推奨。
  44. Infinity : 無限記号。つまんね
  45. Color Picker : 16進数6桁のカラー。色相、彩度、明度(HSB)を使用
  46. Comical Eye : 両目ワンセットで１インスタンスとして実装。座標計算がちょっと大変。
  47. CoordCursor : 一定規則でマウスに追従。
  48. Colorful : カラフルです。
  49. Flash Sound : HTML だけでは音の制御が難しいため、音部分を Flash から引き出す。Flash はよー分からん。まだまだ課題多し。恐らく IE 限定。
  50. Ball 1 : 次の移動位置を方向ベクトルから計算し、またベクトルを正規化することにより、常に一定の速さを保つことができる。
  51. Ball 2 : ↑のものに抵抗を加えたもの。減速は方向ベクトルと移動量で表現。ついでに効果音も挿入。決してビリヤードゲーム制作を目論んでいるわけでは・・・（笑）
  52. ILLUMINATI : 旧サイト「Ψ ILLUMINATI Ψ」のトップページ。激重。複数のタイムラインを設定するとこうなる。NT 推奨。超完全IE5限定。
  53. ILLUMINATI 2 : 新ライブラリテスト．↑のものを書き換え，IE6で正常に動作させるようにしたもの．IE6限定．
  54. Botu : 常連のみぞ知る、このサイトのＴＯＰを飾るはずであった伝説のボツ作品。未完成。NT 推奨。
  55. DHTML SPACE : 以前、SKIPUP で作成しまもの。現存しません。Netscape6 のスクロールバーでえらい奮闘した記憶が。
  56. Old Links : Ψ ILLUMINATI 時代に使用していたリンク集。すっげー恥ずかしいソースです。こんな時代もあったってことで。あ〜懐かしい。IE5 限定。
  57. Color Code 216 : DHTML で初めて作成したまともなコンテンツはこれといっても過言ではない。完全ＩＥ限定。
  58. Color Code 512 : 外部ファイルを使用し（当時）、適宜色数を指定できるようにしたもの。
  59. Make Gradation : 上2つとほぼ同時期に作成したもの。グラデーション配列を作成する。それにしても凄いわ（恥ずいわ）。超完全IE限定。
  60. Layer Font0 : レイヤーで文字を生成。フォントマトリクスはどこかしらのフォントを参考にしたが、作成元が不明。Windows フォント名は「dots」
  61. Layer Font1 : ↑の改良版。文字切り替え時にアニメーション。これは使えそう。
  62. Layer Font2 : ↑のさらに改良版。フォントマトリクスをコンストラクタで指定できるように変更。インスタンスで個別にフォントを指定できる。ちなみにフォントデータクラスは 3×5 と 6×7 。処理がかなり重いです。NT推奨。
  63. Tree Menu : この手のスクリプトはまじめに頭使う・・・上昇再帰、下降再帰、再帰、再帰、再帰・・・あぁぁ
  64. Slide Menu : 珍しくまとも。NS6 の場合、スクロールバーが出てうざい。フレームまたは別ウィンドウで使用。
  65. Menu 010618 : トップで使用しているものの汎用バージョン。現在、フォーカスしている Menu クラスのインスタンスを保持させることで、より包括的（集中的）に扱うことを可能にした。Menu というより Navigation
  66. Windows MenuBar 1 : MenuBar の雛型的クラス。見た目はともかく動作的なデザインは Windows に酷似させた。画像を一切使用しないタイプ。生成の仕方は Java の JMenuBar クラスの仕様を参考にした。
  67. Windows MenuBar 2 : ↑のものに遊び的要素（アニメーション）を加えたもの。対応出来ないバグが少しとメニューを開いたはいいが，閉じる方法を作成者本人が忘れてしまったというオチがある。NTのIE推奨。
  68. Simple MenuBar : シンプルなメニュー。多階層に対応していない。実をいうと未完成。オブジェクト指向でのMenuBar,Menu,MenuItemクラスの最適な実装方法を模索中。
  69. Flat MenuBar : 今まで作成したMenuBarクラスでは一番安定しているものと思われる。吐き出すレイヤーを最低限に抑えている。基本的なカスタマイズも勿論可能。完成率96%。
  70. Slider : 画像を使用しないスライダー。プログラムから操作すればプログレスバーにもなります。NN4推奨。
  71. Slider 2 : 新しいライブラリで，↑のものを書き直しただけ．NN4推奨．（NN4, IE6, NS7, OP7対応）
  72. Zoom : 画像の拡大・縮小 ( 写真-向日葵 ゆん Photo Galley )
  73. Two Colors( R-G ) : 横軸 : Red、縦軸 : Green。G-B, B-R
  74. Chromeless : クロムレスウインドウ。フレームをどう分割するかで迷った。最終的に最小の５枚に、この結果初心者はカスタマイズしにくい形に。掲示板で要望があったので使用したい方はこれを参考に→サンプル、ファイルは→ファイル(zip)

Mathematics

DHTML に必要なもの・・・それは数学知識です。これは、ここの TOP のようにいわゆるあからさまなアクションが欲しいときですが、勿論、数学知識がなくても DHTML は作成できます。ですが、なめらかなオブジェクトの動きやピクセル単位の正確な座標位置などは計算で出すのが賢いやり方です。ここでは DHTML アニメーションの原理、アルゴリズム等について、数学的な見方から、詳しく分析してみたいと思います。
「他人の書いたスクリプトでは納得できない。でも、そのアルゴリズムが分からない（泣）」など、知識旺盛な方が読まれるとためになると思います。
尚、このコンテンツを見るには高校レベルの数学知識が必要になります。数学自体について説明しているわけではないのでご了承下さい。

第１回　イージングについて理解する [ 2001/05/29 ]
◇ list ◇ Skipup Navi ◇ jump ◇