・　説明

　サイズやアスペクト比が異なる画像を表示する事ができる全画面表示スライドショーギャラリーです。 img要素の画像ではなく、div要素の背景画像を使う事で、異なる形状の画像を一定の枠内に表示しています。 バナーにするときはdiv要素ではなくa要素を使い、href属性に開くページのurlを書いてください。 要するにこのスライドショーは、厳密にいうと、IMGスライドショーではなくBLOCKスライドショーです。 また逆に、「BLOCKスライドショーは異なる形状の画像のスライドショーとして使用できる」とも言えます。 スタイルbackground-size:cover;で画面いっぱいに表示し、あたかも画像のスライドショーの様にする事もできます。また、background-size:contain;にすれば、形の違う画像を一定の枠内に表示できます。 スライドショーデータは、「ここからスライドショーのデータ。↓」以下のクラス名koboDataのdiv要素（a要素）で、表示する画像を背景に設定してください。

　スライドショー全体は全画面表示ですが、メイン画像は全体の60%（スタイルシートで変更可）で表示していて、アニメーション動作時に画像の一部が表示枠からはみ出します。 当サイトのアニメーションはoverflow:hidden;（はみ出しを非表示）で動作する様に作ってありますので、このスライドショーではスクロール型など一部のアニメーションは不自然に感じられます。「別のアニメーションの組み合わせを作る」時に注意してください。

　操作ボタンはスライドショーの右上に半透明で表示されています。 viewボタンはクリックで画像が別タブに表示されます。 モバイルではタップ、パソコンではマウスを重ねると不透明になります。

　スライドショーの下部に半透明に見えているガイドとサムネイル一覧は、パソコンではマウスを重ねる（モバイルではサムネイルやガイドボタンが無い場所をタップする）と現れます。 サムネイルもimg要素ではなくdiv要素の背景として表示します。 クラス名gal_baseのdiv要素の中の、クラス名thumbのdiv要素の背景にサムネイル用の画像を設定し、スライドショーと同数を同じ順番で書いてください。

　サムネイルギャラリーは、全サムネイルをWindow幅いっぱい横一列に表示します。 即ち、画像の数が少なければサムネイルは大きくなり、画像の数が多くなるほどサムネイルは小さくなります。 また、横長のWindowではサムネイルのサイズ比率は大きくなり、縦長のWindowではサムネイルのサイズ比率は小さくなります。 デザインを壊さない程度の数を使用してください。

　ガイドボタンはクラス名guideのdiv要素を作っておけばスクリプトが自動的に設置します。

　スライドショーの切り替えアニメーションはです。 多種類のアニメーション名が・で区切られて記述してある場合は、切り替えるたびにアニメーションがランダムに選択されます。 スライドショーの機能はこのままでアニメーションの組み合わせだけを変更したい場合は、このページ最下部「別のアニメーションの組み合わせを作る」をご参照ください。当サイトで提供している全アニメーションから複数の組み合わせを選択し、その見本とソースコードを表示できます。

　題名の[～]の意味は コンテンツの題名のブラケット（角括弧[]）について を参照してください。

　このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。

　このスライドショーは掲載しているソースコードのみで動きます。 jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。 個人・商用を問わず無料で自由に使用できます。

　このページでは、実際の地球の写真を加工したものや生成AIのGeminiで作った地球の画像と私が撮影した写真を合成したものを使っています。

⇔

・　ソースコード

　以下のソースコードは、スライドショーだけを表示する独立したページ全体のものです。全体をコピーし、「メモ帳」などのテキストエディタに貼り付け、文字コードを「UTF-8」に設定し、拡張子を「.html」にし、お好みの「名前を付けて保存」してください。 スライドショーを他のページに張り付けて使うときは、ソース内の説明に従い、スタイル部分をHEADに、スライドショー本体部分を貼り付ける位置に、スクリプトをBODY内の最下部（スライドショー本体よりも下ならば可）にコピーしてください。

　見本の画像は、パソコンでの編集では表示されますが、Web上にアップすると表示されないものもあります。 必ずご自身の画像に書き換えてください。

・　別のアニメーションの組み合わせを作る

下の「アニメーションの文字列」を参照し、ご希望のアニメーションの組み合わせ（一つでも可）文字列を作り、下の枠内に記述し、「この組み合わせで作る」ボタンをクリックしてください。その際、一つの時はアニメーション文字列のみ、複数の時はアニメーション文字列を半角文字の「&」で結合しで記述してください。
例えば、
縦横入れ替わり・縦横3D入れ替わり・縦横転がりの３個ならば「d_ire_xy&d_ire3D_xy&d_koro_xy」となります。
brightness・blur・ランダムclip-polygon・ランダムclip-circleの４個ならば「brightness&blur&polygon&circle」となります。
3D横ズーム入れ替わり・3D縦ズーム入れ替わりの２個ならば「ire3D_x&ire3D_y」となります。
ランダム透かし移動インアウトの１個だけならば「r_su_in_out」となります。
なお、何も書かずにクリックすると、枠内に薄い文字で表示されている組み合わせが作られます。
文字列の途中で改行したり空白や無関係の文字を入れたりすると、動かないスライドショーが作られます。
アニメーションの数に制限はありませんが、多くなると煩雑になるため３～５個程度が無難だと思います。

この組み合わせで作る

・　アニメーションコード（表記形式は、アニメーション名 ⇒ コード）

★　以下はドラッグ・フリック・マウスホイールにアニメーションの縦横方向が連動します。

縦型と横型が合体したアニメーション。ドラッグ・フリック・マウスホイール操作ができるスライドショーで機能を発揮できる。
｜　縦横連動ランダムズーム3D回転1 ⇒ d_r_z3D_xy　｜　縦横連動ランダムズーム3D回転2 ⇒ d_r_3D_xy　｜　縦横スクロール ⇒ d_sc_xy　｜　縦横透かしスクロール ⇒ d_susc_xy　｜　縦横視差スクロール ⇒ d_shisa_xy　｜　縦横透かし視差スクロール ⇒ d_sushisa_xy　｜　縦横入れ替わり ⇒ d_ire_xy　｜　縦横転がり ⇒ d_koro_xy　｜　縦横3D回転 ⇒ d_rot_xy　｜　縦横3D裏返し ⇒ d_ura3D_xy　｜　縦横3D入れ替わり ⇒ d_ire3D_xy　｜　縦横3D逆入れ替わり ⇒ d_rei3D_xy　｜　縦横CUBE回転 ⇒ d_cube_xy　｜　縦横コーナー回転 ⇒ d_corner_xy　｜　縦横CUBE枠内回転 ⇒ d_becu_xy　｜　

縦型と横型が合体した4画像アニメーション。4画像に対応したスライドショーのみで使用可。
｜　縦横インアウトバックカルーセル ⇒ d4_ca_inoutback_xy　｜　縦横透かしインアウトバックカルーセル ⇒ d4_suca_inoutback_xy　｜　ズーム縦横インアウトバックCUBE回転 ⇒ d4_zcube_inoutback_xy　｜　ズーム縦横インアウトバックCORNER回転 ⇒ d4_zcorner_inoutback_xy　｜　ズーム縦横インアウトバック3Dスクロール ⇒ d4_zsc3D_inoutback_xy　｜　ズーム縦横インアウトバック転がり ⇒ d4_koro_inoutback_xy　｜　ズーム縦横インアウトバック3D回転 ⇒ d4_z3Drot_inoutback_xy　｜　

★　以下はドラッグ・フリック・マウスホイールにアニメーションの縦横方向が連動しません。

方向性がないタイプで、前進でも後退でも変わらないもの。
｜　透かし ⇒ su　｜　フェード ⇒ fade　｜　落下 ⇒ rakka　｜　ブライトネス ⇒ brightness　｜　ブラー ⇒ blur　｜　ランダムクリップポリゴン ⇒ polygon　｜　ランダムクリップサークル ⇒ circle　｜　起き上がり ⇒ rise　｜　ショットズーム回転 ⇒ shot_zoom　｜　フラッシュ ⇒ flash　｜　ランダムワイプ ⇒ wipe　｜　

方向性があるタイプで、前進と後退でアニメーションの方向が変わるもの。
｜　アップダウン ⇒ ud　｜　ダウンアップ ⇒ du　｜　ダウンジャンプ ⇒ dj　｜　ランダムアップダウン ⇒ uddu　｜　Z方向スクロール ⇒ z_sc　｜　せり出し ⇒ seri　｜　横転がり ⇒ koro_x　｜　縦転がり ⇒ koro_y　｜　横入れ替わり ⇒ ire_x　｜　縦入れ替わり ⇒ ire_y　｜　スクロール横 ⇒ sc_x　｜　スクロール縦 ⇒ sc_y　｜　透かしスクロール横 ⇒ susc_x　｜　透かしスクロール縦 ⇒ susc_y　｜　視差スクロール横 ⇒ shisa_x　｜　視差スクロール縦 ⇒ shisa_y　｜　視差透かしスクロール横 ⇒ sushisa_x　｜　視差透かしスクロール縦 ⇒ sushisa_y　｜　ランダム回転移動インアウト ⇒ in_out　｜　

方向性があるタイプで、前進と後退で3Dアニメーションの方向が変わるもの。
｜　横3D回転 ⇒ rot_x　｜　縦3D回転 ⇒ rot_y　｜　CUBE横ズーム回転 ⇒ cube_x　｜　CUBE縦ズーム回転 ⇒ cube_y　｜　3D横ズーム入れ替わり ⇒ ire3D_x　｜　3D縦ズーム入れ替わり ⇒ ire3D_y　｜　3D横ズーム逆入れ替わり ⇒ rei3D_x　｜　3D縦ズーム逆入れ替わり ⇒ rei3D_y　｜　3D横ズーム裏返し ⇒ ura3D_x　｜　3D縦ズーム裏返し ⇒ ura3D_y　｜　3D横ズームスクロール ⇒ sc3D_x　｜　3D縦ズームスクロール ⇒ sc3D_y　｜　CUBE枠内横回転 ⇒ becu_x　｜　CUBE枠内縦回転 ⇒ becu_y　｜　ドア横回転 ⇒ door_x　｜　ドア縦回転 ⇒ door_y　｜　縦スウィング ⇒ swing_y　｜　縦ズームスウィング ⇒ z_swing_y　｜　

方向性があるタイプで、前進と後退に関係なく3Dアニメーションの方向がランダムに変わり、縦方向と横方向もランダムに変わるもの。
｜　縦横前後ランダムズーム3D回転1 ⇒ r_xynp_z3D1　｜　縦横前後ランダムズーム3D回転2 ⇒ r_xynp_z3D2　｜　

方向性があるタイプで、前進と後退で3Dアニメーションの方向が変わるが、縦方向と横方向がランダムに変わるもの。
｜　ランダム3D縦横ズーム裏返し ⇒ r_ura3D_xy　｜　ランダムタイミング3Dズーム裏返し ⇒ r_ura3D_ttf　｜　ランダム3D縦横ズーム入れ替わり ⇒ r_ire3D_xy　｜　ランダム3D縦横ズーム逆入れ替わり ⇒ r_rei3D_xy　｜　ランダム縦横ズームCUBE回転 ⇒ r_cube_xy　｜　ランダム縦横ズームコーナー回転 ⇒ r_corner_xy　｜　ランダム縦横ズーム3D回転1 ⇒ r_z3D_xy　｜　ランダム縦横ズーム3D回転2 ⇒ r_3D　｜　

方向性があるタイプで、前進と後退でページめくりアニメーションの方向が変わるもの。
｜　射光型3D横ズームページめくり ⇒ page0　｜　射光型3D縦ズームページめくり ⇒ page05　｜　全回転型3D横ズームページめくり ⇒ page1　｜　全回転型3D縦ズームページめくり ⇒ page15　｜　2D摘みページめくり ⇒ page2　｜　2Dずらしページめくり ⇒ page3　｜　

前進でも後退でもアニメーションの方向がランダムなもの。
｜　ランダム縦横スクロール ⇒ sc_xy　｜　ランダム方向移動 ⇒ sc_r　｜　ランダム方向視差移動 ⇒ shisa_r　｜　ランダムズーム ⇒ z　｜　円ワイプ ⇒ wipe_en　｜　ランダム回転入れ替わり ⇒ rot_ire　｜　ランダムタイミング移動 ⇒ sc_r_ttf　｜　ダウンアップジャンプ ⇒ duj　｜　ランダム透かし移動インアウト ⇒ r_su_in_out　｜　ランダム2D回転 ⇒ r_rot_2d　｜　

前進・後退に関係なくアニメーションの方向が交互になるもの。シャトル型。
｜　左右シャトル型スクロール ⇒ s_sc_x　｜　上下シャトル型スクロール ⇒ s_sc_y　｜　左右シャトル型透かしスクロール ⇒ s_susc_x　｜　上下シャトル型透かしスクロール ⇒ s_susc_y　｜　左右シャトル型視差移動 ⇒ s_shisa_x　｜　上下シャトル型視差移動 ⇒ s_shisa_y　｜　左右シャトル型透かし視差移動 ⇒ s_sushisa_x　｜　上下シャトル型透かし視差移動 ⇒ s_sushisa_y　｜　左右シャトル型転がり ⇒ s_koro_x　｜　上下シャトル型転がり ⇒ s_koro_y　｜　前後シャトル型zスクロール ⇒ s_z_sc　｜　前後シャトル型せり出し ⇒ s_seri　｜　

前進・後退に関係なく3Dアニメーションの方向が交互になるもの。シャトル型。
｜　左右シャトル型枠内CUBE回転 ⇒ s_becu_x　｜　上下シャトル型枠内CUBE回転 ⇒ s_becu_y　｜　左右シャトル型ズームCUBE回転 ⇒ s_cube_x　｜　上下シャトル型ズームCUBE回転 ⇒ s_cube_y　｜　左右シャトル型3D入れ替わり ⇒ s_ire3D_x　｜　上下シャトル型3D入れ替わり ⇒ s_ire3D_y　｜　左右シャトル型3D逆入れ替わり ⇒ s_rei3D_x　｜　上下シャトル型3D逆入れ替わり ⇒ s_rei3D_y　｜　左右シャトル型3D裏返し ⇒ s_ura3D_x　｜　上下シャトル型3D裏返し ⇒ s_ura3D_y　｜　左右シャトル型ドア回転 ⇒ s_door_x　｜　上下シャトル型ドア回転 ⇒ s_door_y　｜　

アニメーションにrequestAnimationFrameメソッドを使用したもの。
｜　rAF型びろ～ん ⇒ rAF_OutZ　｜　rAF型弾性移動 ⇒ rAF_FeIdo　｜　rAF型弾性二段階ズーム ⇒ rAF_Rm2StZ　｜　rAF型ランダム弾性移動 ⇒ rAF_RmReIdo　｜　rAF型弾性ズーム ⇒ rAF_RmZ　｜　rAF型バウンスズーム ⇒ rAF_BoZ　｜　rAF型ランダム回転ズーム ⇒ rAF_RZrot　｜　

All Rights Reserved. Copyright (C) 2002- Miyake_kobo.