20年近く前に見て楽しいHome Pageを作ろうと当時は結構進んでいたJavaScript DHTMLの事例集のページです。
今では技術も進みダイナミックに変化する画面も簡単に作れるようになっていますが当時の苦労を残しておきます。 ここに載せた事例は最低限の修正をしてスマホなどのモバイル機器でも見れるようにしましたが、一部は動作に不具合があったり スマホでは操作性に劣るものもありますがご勘弁ください。
まずは当時の説明から。
ホームページ作りもだんだんと凝りはじめ、アニメーションGIFでは出来ないことをJavaScriptを使ってやってみようとトップページ作りを始めました。 ここには今までに作ったJava Script/DHTML（ダイナミックHTML)を用いた始めのタイトル画面の事例・サンプルとしてまとめてあります。
2週間に１度のペースで新しいものを考えていきたいと思っていますがいつまで続けられるか･･･
各ページにポイントは記述しましたが、詳細はソースをご覧下さい。
(クロスブラウザを心がけていますが、Operaだけはレイヤのクリップ表示機能が無いためほとんどの事例でうまく動きません。 Internet Explorer,Netscape 4以降では動くはずです。)
| 項番 | 項目 | 掲載日 | 概要 |
|---|---|---|---|
| 55 | ねずみのしっぽ | 2005.9.11 | 文字列がねずみのしっぽのようにマウスカーソルに付きまといます。 |
| 54 | 15ゲーム | 2005.5.7 | 1～15の数字を並べるおなじみのゲームです。 |
| 53 | 踊る文字 | 2005.2.13 | 文字が踊りまくったあと整列してメッセージになります。 |
| 52 | 天道虫 | 2004.4.29 | 天道虫がサンバを踊りながら？文字列を表示します。 |
| 51 | メッセージ表示 | 2004.2.3 | 5種類の歓迎メッセージが縦に伸びながら切り替え表示されます。 |
| 50 | 芋虫ゲーム | 2003.11.29 | 芋虫を壁にぶつからないように動かしながら果物を食べるゲームです。 |
| 49 | ジグソウパズル | 2003.9.7 | ジグソウパズルです。動かす画像をドラッグして完成させます。 |
| 48 | 扇風機 | 2003.8.17 | 今年はもう扇風機も必要ないかもしれませんが・・・ |
| 47 | 地球の運動 | 2003.6.23 | 地球の自転、公転、影を見てください。 |
| 46 | ルーレット | 2003.5.11 | コインを賭けて遊んで見てください。 |
| 45 | めくり絵 | 2003.3.16 | 4隅から絵をめくると裏面が透けながら次の絵に。 |
| 44 | ドット文字表示 | 2003.2.23 | 入力した文字列をドット文字で各種表示します。 |
| 43 | シュプール | 2003.1.25 | 少しはスキーに行った気分になるでしょうか？ |
| 42 | 射的 | 2002.12.31 | お正月に干支の射的をどうぞ |
| 41 | クリスマス | 2002.12.08 | サンタクロースの乗ったソリが走るクリスマスカード |
| 40 | カレンダー | 2002.11.21 | 希望の年月のカレンダを表示します。ご自分の生まれた日の曜日は？ |
| 39 | 風船 | 2002.10.27 | ゆらゆら揺れながら上昇する風船を割って見てください。 |
| 38 | 足跡 | 2002.09.29 | 変なペンギンが足跡を残して動きまわります。 |
| 37 | いじわるボタン | 2002.09.09 | チョット意地悪なボタンです。 |
| 36 | 雷 | 2002.08.24 | 夜空に稲妻、閃光が走ります。 |
| 35 | いるか | 2002.07.28 | いるかが波立つ海面をジャンプしていきます。 |
| 34 | 虫眼鏡 | 2002.06.30 | マウスで虫眼鏡を移動させると画像が5倍に拡大表示されます。 |
| 33 | パノラマ | 2002.05.25 | 360度の景色の希望の場所が表示されます。 |
| 32 | 車窓から | 2002.04.21 | 列車の窓から見える景色を表示してみました。 |
| 31 | 文字拡大表示 | 2002.03.24 | 小さい文字の文字列が順に大きな文字に変わるサイン表示です。 |
| 30 | 虹サイン | 2002.03.03 | 文字の色が虹色に流れるサイン表示です。 |
| 29 | 跳ねるボール | 2002.02.11 | 落下し、跳ね返るボールのシミュレーションです。 |
| 28 | 画像切り替え | 2002.01.20 | スライドショウのように色々なパターンで画像を切り替えます。 |
| 27 | 砂時計 | 2002.01.06 | 砂時計が落ちきると何が起こるか。砂時計の反転もできます。 |
| 26 | 床屋さんサイン | 2001.12.23 | 床屋さんのサインのように枠の棒が回転してみえます。 |
| 25 | フライイング果物 | 2001.12.08 | Windowsのスクリーンセーバのフライイングウィンドウもどきです。 |
| 24 | タイプライタ | 2001.11.25 | タイプライタが指定の文字列を紙に印字する動作を模擬表示します。 |
| 23 | レントゲン | 2001.10.28 | 画面表示されているものを、マウスで動くカメラが透過写真表示します。 |
| 22 | 落ち葉 | 2001.10.12 | 画面上をゆらゆら落ち葉が落下します。風を吹かすと落ち葉も飛びます。 |
| 21 | パイプ | 2001.09.24 | Windowsのスクリーンセイバーのようにパイプを描く。(ただし二次元です) |
| 20 | プラネタリウム | 2001.09.08 | 5項での失敗作にレイヤを使って再挑戦。時々刻々星空が変化します。昼間見えない星も見れる星座早見です。星の名前も見れます。 |
| 19 | 鳩時計 | 2001.08.27 | 鳩が時刻と同じ回数顔を出すアナログ鳩時計。 |
| 18 | 玉突き振り子 | 2001.08.17 | 理科の実験でお馴染の玉突きの振り子です。 |
| 17 | 花火 | 2001.08.07 | 色々な色の花火がランダムに打ち上げられます。 |
| 16 | 海を泳ぐ魚 | 2001.07.28 | 左右からランダムに色々な魚が泳いできます。 |
| 15 | 紙芝居 | 2001.07.08 | Home Pageの紹介を紙芝居風に表示します。 |
| 14 | スライド表示 | 2001.06.09 | 歓迎メッセージが画面端からすべるように出てきます。 |
| 13 | 幕開け | 2001.05.20 | 舞台の幕が開くと中にご挨拶が現れます。幕の開閉ボタンもあります。 |
| 12 | 回転文字サイン | 2001.05.06 | 18文字が回転するサインです。各文字の色も1回転毎に変わります。 |
| 11 | 神経衰弱 | 2001.04.21 | 枚数は少ないですが、トランプの神経衰弱の一人ゲームです。 |
| 10 | カレンダー | 2001.04.07 | 今月のカレンダーを自動作成し、今日の位置を表示します。 |
| 9 | スロットマシーン | 2001.03.25 | 3桁の数字のスロットマシーンです。幾つの数字が一致したかも判定します。 |
| 8 | 音声による挨拶 | 2001.03.11 | アクセスされた時刻により挨拶の音声と文字が変わります。(多少時間が掛かります。) |
| 7 | 回転ネオンサイン | 2001.02.25 | 二つのボールが異なる色で異なるスピードでぐるぐる回ります。 |
| 6 | 現在日時をリアルタイム表示 | 2001.02.10 | 現在の日時をリアルタイム表示。曜日により月日の文字色を、時刻により時刻の文字色が変化。 |
| 5 | プラネタリウム | 2001.02.10 | 現在の星空を表示し、以降5秒ごとに1時間後の星空を順に表示する。指定時刻の星空も表示できる。表示中の星をクリックすると名前を表示する。 表示に大変時間が掛かります。(特にNetscapeの場合) |
| 4 | 毎回背景画を変える | 2001.01.30 | ロードされるたびに背景画を変えて見ます。 |
| 3 | 雪が降ったり溶けたり | 2001.01.27 | 雪が降りはじめ、だんだんと強くなり積もっていきます。やがて止み、太陽が出 雪を溶かします。 |
| 2 | 蛇たたき | 2001.01.15 | 蛇のもぐらたたきです。穴からランダムに出てくる蛇をクリックしてください。 |
| 1 | 背伸びする蛇 | 2001.01.02 | 10匹の蛇がランダムに背伸びし、元に戻ります。 |