説明 ◆その他◆
◆その他・実用・メニュー ◆その他・時間差フェード・メニュー ◆その他・変身・メニュー ◆その他・面白・メニュー ◆その他・開閉幕・メニュー
動く画像のJavaScriptなのだけど、分類ジャンルに困ったものを紹介します。
このジャンルで紹介していたものが、別ジャンルに移動したり、独立コーナーになったりしたモノもあるので、下記参照して下さい。↓
なお、ドキュメント宣言が<!DOCTYPE html>では動かないモノにはHTML5が付いてます。
■花火、噴き出す画像（文字）のJavaScriptは、『ふわふわ』のジャンルメニューにあります■
■以前は文字関連と画像関連にコーナー分けしていましたが、探しやすいように『実用』『面白』に分けました（2014/9/19）
■『実用』コーナーのJavaScriptは、大半を「文字」と「便利」という別ジャンルメニューへ移動しました。ジャンルメニューからどうぞ（2015/8/4）
■画像や文章を表示した部分が、カーテンやスクリーンのように落下したり上昇したり、表示されたり消えたりする、JavaScriptの特集コーナーはこちら。→ ◆その他・開閉幕・メニューへ（2015/1/12）
■表（テーブル=table）作成のJavaScriptは、独立して別ジャンルメニューへ移動しました。ジャンルメニューからどうぞ（2015/6/6）
■『実用』コーナーから時間差のフェード表示等を『時間F』として独立させました。コーナーはこちら。→ ◆その他・時間差フェード・メニューへ（2021/9/21）
■並んだ複数画像がランダムに変化する『変身』コーナーを新設。コーナーはこちら。→ ◆その他・変身・メニューへ（2021/9/22）
◆◇◆ このページの背景は、「動く背景・背景作成メニュー」の「背景作成１０■ブロック並べの背景Ｃ色四角」です。
色の並べ方」指定は「0」です。 ◆◇◆
説明 ◆その他・実用・メニュー◆
主に実用性の強いJavaScriptの紹介です。「時間差フェード」は別コーナーに独立しました。| リアルタイム時計・基本編 | ■実用■ リアルタイムで時刻を刻む時計のJavaScriptです。装飾無しの基本形。年月日と時刻。 |
| リアルタイム時計・応用編 | ■実用■ 上記リアルタイムで時刻を刻む時計のCSSでの装飾形。さらに年号と曜日も追加。 |
| ボタン変化インラインフレーム | ■実用■ インラインフレームの中に呼び出すhtmlを、ボタンクリックで切り替えます。 |
| 時間変化インラインフレーム | ■実用■ インラインフレームの中に呼び出すhtmlが、自動で切り替わります。 |
説明 ◆その他・時間差フェード・メニュー◆
主に時間差によるフェード関連のJavaScriptの紹介です。「実用」コーナーから独立しました。全件グローバル変数を削除済み：2021/09/21
| フェードで時間差表示 id | ■時間■ 時間差のフェードインで、次々に画像やタイトルや文章が表示されるJavaScriptです。 |
| フェードで時間差消去 id | ■時間■ 上記とは逆に時間差のフェードアウトで、次々に画像やタイトルや文章が消去されるJavaScriptです。 |
| フェード時間差idランダム | ■時間■ 上記を改造。時間差のフェードで表示される順番がランダムです。更新するごとに変化。 |
| フェードで時間差表示 img | ■時間■ 時間差のフェードインで、指定領域内の全ての「imgタグの画像」が次々に表示されます。 |
| フェード時間差imgランダム | ■時間■ 時間差のフェードインで、指定領域内の全ての「imgタグの画像」が次々にランダム表示。 |
| フェードで時間差表示 div | ■時間■ 時間差のフェードインで、指定領域内の全ての「divの中身」が次々に表示されます。 |
| フェード時間差divランダム | ■時間■ 時間差のフェードインで、指定領域内の全ての「divの中身」が次々にランダム表示。 |
説明 ◆その他・変身・メニュー◆
並んだ画像が別の画像に変身するJavaScriptの紹介です。鴈（かり）野さんちのホームページのJava Script/DHTML 事例集の「背伸び蛇」が原本です。
いろいろ改造しました。
全件「document.write」や「innerHTML」ではなく「insertAdjacentHTML」を使用。
失敗しないためには、その説明の有る「膨らむフグ」の基本と応用を最初に見て下さい。
「insertAdjacentHTML」の記述方法についてはJavaScriptでinsertAdjacentHTMLメソッドを使ってHTML要素を追加する方法を参考にしました。
全件グローバル変数を削除済み：2021/09/23
| 膨らむフグ-基本（後ろにサメ） | ■変身■ 並んだフグがランダムで膨らんだフグに変身します。「afterbegin」を使用。 |
| 膨らむフグ-応用（前にサメ） | ■変身■ 変身する並んだフグより前に、タイトル、サメ、クラゲを表示するために「beforeend」を使用。 |
| １個の画像並べて２変身 | ■変身■ 使用画像は１枚のみ。ダンサー画像を並べ、CSSアニメ指定でサイズ変化と上下回転変化をします。 |
| 複数の画像並べて３変身 | ■変身■ 複数の画像をランダムに並べ、CSSアニメ指定でサイズ、左右回転、左右反転変化をします。 |
説明 ◆その他・面白・メニュー◆
ページを楽しくするJavaScriptの紹介です。| ランダム画像 | ■面白■ ページを開くたびに、ランダムに違う画像に変化するJavaScriptです。 |
| 光が走る | ■面白■ 光が走るとしか表現できませんが、グラデーションの光がとても美しいです。 |
| 光虫 | ■面白■ 上記光輪に似てますが、こちらはブラウザによって見え方が違います。 |
| 回転するキラキラボール | ■面白■ 美しい光の玉が回転します。うっとりするくらい綺麗です。 |
| マウスオンでブロック落とし | ■面白■ ブロックをマウスオンすると、ブロックが次々に落下していくJavaScript。ブラウザIE専用を全ブラウザ対応へ改造。原本サイトへのリンク有り。 |
| マウスドラッグで文章が出る | ■面白■ ブロックをマウスドラッグすると、ブロックが消えていくJavaScript。原本サイトへのリンク有り。 |
| 自動でランダムブロック消し | ■面白■ 自動でブロックが次々にランダムに消えていくJavaScript。ブロックは画像ですが、色だけにすることも可能。原本サイトへのリンク有り。 |
| 自動で上からブロック消し | ■面白■ 自動でブロックが次々に上から消えていくJavaScript。ブロックは画像ですが、色だけにすることも可能。原本サイトへのリンク有り。 |
| 自動ランダムブロック消・色 | ■面白■ 自動でブロックが次々にランダムに消えていくJavaScript。上々記と同じソースで指定だけ違います。ブロックは背景色。 |
| ランダム星空が瞬く | ■面白■ 画面一杯にキラキラ瞬く星空を作ります。アクセスするたびにランダムに配置が変化。2015/05/27：星空は「文字フォント」か「画像」か選択可能。 |
| 画像のランダム配置 | ■面白■ ページを開くたびに、画像の配置が変わります。原本を複数画像指定、HTML5対応、透過指定付きに改造。原本サイトへのリンク有り。 |
| １時間ごとに画像変化・連番 | ■面白■ １時間ごとに画像が変化。合計２４枚の変化ですが、画像を連番指定することで、とても短いソースで実現しています。2015/01/15：修正 |
| TIMEごと画像連番変化・応用 | ■面白■ 上記の応用編です。１時間ごと、曜日ごと、月ごと、日ごとの画像変化。普通画像以外に、背景画像バージョンも有ります。2015/01/15：修正 |
| 複数画像をドラッグ移動 | ■面白■ 複数画像をマウスドラッグで移動できます。クリスマス仕様で、背景はCSSで描きました。 |
| 電飾クリスマス・ツリー | ■面白■ 画像は一切使用せず、CSSで描いたツリーに丸い電飾がキラキラ輝きます。ツリーは画像を使用しても可能。古いIE専用を、最新IEとその他のブラウザ対応に改造しました。 |
◆その他・実用・メニュー ◆その他・時間差フェード・メニュー ◆その他・変身・メニュー ◆その他・面白・メニュー ◆その他・開閉幕・メニュー
説明 ◆その他・開閉幕・メニュー◆
画像や文章を表示した部分が、カーテンやスクリーンのように落下したり上昇したり、表示されたり消えたりするJavaScriptの紹介です。表現するのが難しいので、とりあえず「開閉幕」と名付けました。
| 幕(スクリーン)落下上昇 | ■開閉幕■ ボタンを押すと天井から幕(スクリーン)が下りてきます。幕(スクリーン)には、画像や文章を載せることが可能。ボタンでまた元に戻ります。2015/01/12：修正 |
| 幕(スクリーン)上昇落下 | ■開閉幕■ 上記を改造して、最初から幕(スクリーン)が下りた状態にしました。ボタンで上昇しますが、メニュー部分は残って上部に固定されます。 |
| 幕のスクロール上昇 | ■開閉幕■ 上記をさらに改造して、最初から下りた幕(スクリーン)を、画面スクロールで自動的に上昇させるように改造。メニュー部分は残って上部に固定されます。 |
| 幕のスクロール落下非表示 | ■開閉幕■ 上記をさらに改造して、通常は非表示の落下指定の矢印が、上部固定時にのみ表示されるように改造。 |
| 超簡単CSSで上から幕 | ■開閉幕■ JavaScriptを全く使用せず、CSSだけで作成。マウスオンで幕（スクリーン）が上から落下し、マウスアウトで元に戻ります。 |
| 超簡単CSSで左から幕 | ■開閉幕■ JavaScriptを全く使用せず、CSSだけで作成。マウスオンで幕（スクリーン）が左から飛び出し、マウスアウトで元に戻ります。 |
| 一発開閉 | ■開閉幕■ ボタンクリックで、画像やテキストが表示されたり消えたりします。表示→非表示と、非表示→表示の２パターン有り。 |
| 超簡単タブ切替もどき | ■開閉幕■ クリックで、異なる内容を１つのスペースの中に呼び出すことが可能。JavaScriptのソースは、たった一行です。前回掲載の「クリックで簡単div変更」をタブ仕様に変更。2015/09/17：target 修正 |
| JS+CSSでタブ切替 | ■開閉幕■ 見た目は上記と同じですが、タブ切替で呼び出すdivに対して個別に背景色等の指定が可能。前回掲載分の「クリックでdiv変更」は削除して、今回UP分の改造の参考にしました。2015/09/17：target 修正 |
| 超簡単CSSでタブ切替 | ■開閉幕■ JavaScriptは使用せず CSS だけで作成した「タブのページ切替」。位置指定が少し欠点ですが、簡単です。 |
| CSSでタブ切替の固定 | ■開閉幕■ 上記を固定位置指定にしました。さらにJavaScriptで、どのタブが選択されているかがわかるように装飾。2015/07/26：JavaScript修正 |