- ・ 説明
-
同じサイズ（同じアスペクト比であれば可）の画像を使うスライドショーです。
スライドショー全体は全画面表示ですが、メイン画像は全体の60%（スタイルシートで変更可）で表示していて、アニメーション動作時に画像の一部が表示枠からはみ出します。
当サイトのアニメーションはoverflow:hidden;（はみ出しを非表示）で動作する様に作ってありますので、このスライドショーではスクロール型など一部のアニメーションは不自然に感じられます。「別のアニメーションの組み合わせを作る」時に注意してください。
- 画像は、img要素ではなくdiv要素の背景画像を使っています。 バナーにするときはdiv要素ではなくa要素を使い、href属性に開くページのurlを書いてください。 同じアスペクト比の画像を使うときはボタンでcoverに設定して画面いっぱいに表示する事もできます。 スライドショーデータは、「ここからスライドショーのデータ。↓」以下のクラス名koboDataのdiv要素（a要素）で、表示する画像を背景に設定してください。
- 操作ボタンはスライドショー右上に半透明に表示されています。 モバイルではタップ、パソコンではマウスを重ねると不透明になり可視化されます。 [表示方法変更ボタン][罫線設定ボタン][viewボタン]や[アクティブ][シャッフル][実行時ランダム]機能などの説明は コンテンツの題名のブラケット（角括弧[]）について をご参照ください。
- スライドショーの切り替えアニメーションはです。 多種類のアニメーション名が・で区切られて記述してある場合は、切り替えるたびにアニメーションがランダムに選択されます。 スライドショーの機能はこのままでアニメーションの組み合わせだけを変更したい場合は、このページ最下部「別のアニメーションの組み合わせを作る」をご参照ください。当サイトで提供している全アニメーションから複数の組み合わせを選択し、その見本とソースコードを表示できます。
- スライドショーの下部に半透明に見えているガイドとサムネイル一覧は、パソコンではマウスを重ねる（モバイルではタップする）と現れます。 サムネイルもimg要素ではなくdiv要素の背景として表示します。 クラス名gal_baseのdiv要素の中の、クラス名thumbのdiv要素の背景にサムネイル用の画像を設定し、スライドショーと同数を同じ順番で書いてください。 [カルーセル連動]型で動作します。
- ガイドボタンはクラス名guideのdiv要素を作っておけばスクリプトが自動的に設置します。
- このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。
- このスライドショーは掲載しているソースコードのみで動きます。 jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。 個人・商用を問わず無料で自由に使用できます。 このページでは生成AIで作った画像を使っています。
- 画像は、img要素ではなくdiv要素の背景画像を使っています。 バナーにするときはdiv要素ではなくa要素を使い、href属性に開くページのurlを書いてください。 同じアスペクト比の画像を使うときはボタンでcoverに設定して画面いっぱいに表示する事もできます。 スライドショーデータは、「ここからスライドショーのデータ。↓」以下のクラス名koboDataのdiv要素（a要素）で、表示する画像を背景に設定してください。
 |
⇔ |  |
- ・ ソースコード
-
以下のソースコードは、スライドショーだけを表示する独立したページ全体のものです。全体をコピーし、「メモ帳」などのテキストエディタに貼り付け、文字コードを「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.