・　サンプルの説明

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

　使用している「植物の組み合わせに季節的な違和感がある画像」は生成AIのCopilotで作ったものです。

　BLOCKスライドショーを幅100%高さ100vhで表示して全Window型のスライドショーとして使用します。 BLOCKスライドショーとは、IMG要素の写真ではなくDIV要素などのBLOCK要素を切り替えるスライドショーです。 そのDIV要素の背景画像に写真を表示し、スタイルbackground-size:cover;で、あたかも全画面写真のスライドショーの様に表示しています。 このページではアスペクト比が同じ写真を使っていますが、アスペクト比が異なるバラバラな形の写真を使い、スタイルbackground-size:contain;に変更して、画面内に写真全体が収まるサイズで表示する事もできます。 スライドショーデータは「ここからスライドショーのデータ。↓」以下のクラス名koboDataのBLOCK要素で書いてください。 このページでは、写真表示のみはdiv要素、写真をクリックすると設定したページが開くバナーはa要素を使っています。

　スライドショーの切り替えアニメーションはです。 スライドショーの機能はこのままでアニメーションだけを変更する場合は、このページ最下部「別のアニメーションを見る」をご参照ください。

　操作ボタンは3個でスライドショー右上に半透明に表示されています。 モバイルではタップ、パソコンではマウスを重ねると不透明になり可視化されます。

　ソースを単独の全Window型スライドショーページとしても、他のページにIFRAMEで読み込んでも使用できます。 一つのページに複数個を設置するときは複数個のIFRAMEで読み込んでください。

　このスライドショーは、スライドショーを表示しているWindowを非アクティブにする（最前面ではなくする・選択を外す・blurにする）と停止し、アクティブに戻す（最前面にする・選択する・focusにする）と再開します。 即ち、別のタブを開いたり、別のWindowで別の作業すると、スライドショーは一時停止して待機状態になります。 スライドショーの写真をクリックして、別のタブに設定したページを開いた時も一時停止します。 スライドショーのタブやWindowをクリックしてアクティブに戻すと再開します。 この機能は「カスタマイズ」でON／OFFを設定できます。

　このスライドショーは、記述したスライドショーデータをページを開いた時点でシャッフルする事ができます。 即ち、スライドショーがあるページを開くたびに異なる順番で実行できます。 「記述した順番で実行」または「シャッフルして実行」を「カスタマイズ」で選択できます。

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

⇔

・　全Window型・IFRAME用スライドショー

　以下はページ全体のソースコードで、他のページに張り付けるものではありません。 ソースコード全体をコピーし、「メモ帳」などのテキストエディタに貼り付けて編集し、文字コードを「UTF-8」に設定し、拡張子を「.html」にし、お好みの「名前を付けて保存」してください。 他のページに張り付ける時は、スタイルシート部分を張り付けるページのHEAD内にコピーし、スライドショーHTMLとスクリプトを張り付けるページのBODY内にコピーしてください。 必ずご自身の写真データに書き換えてからアップしてください。 見本の写真データのまま製作すると、パソコンでの編集では表示されますが、Web上にアップすると表示されません。 見本の写真を流用する時は、写真をダウンロードし、ご自身のホルダーに保存したものを使用してください。

・　別のアニメーションを見る

前進と後進で動作方向が反転するもの。
スクロール横 　 スクロール縦 　 Z方向スクロール 　 視差スクロール横 　 視差スクロール縦 　 横転がり 　 縦転がり 　 横入れ替わり 　 縦入れ替わり 　 CUBE枠内横回転 　 CUBE枠内縦回転 　 アップダウン 　 ダウンアップ 　 ランダムアップダウン 　 せり出し 　 ランダム回転移動インアウト 　 ドア横回転 　 ドア縦回転 　 横3D回転 　 縦3D回転 　 円ワイプ 　 2D摘みページめくり 　 2Dずらしページめくり 　 rAF型弾性二段階ズーム

ランダムな方向に動作するもの、または方向性がないもの。
　 落下 　 起き上がり 　 透かし 　 brightness 　 ランダムclip-polygon 　 ランダムclip-circle 　 ランダムズーム 　 ショットズーム回転 　 フラッシュ 　 ランダムワイプ 　 ランダム回転入れ替わり 　 ランダム2D回転 　 rAF型弾性移動 　 rAF型びろ～ん

ズーム3Dアニメーションを使ったもの。
　 ランダム縦横ズーム3D回転1 　 ランダム縦横ズーム3D回転2 　 3D横ズーム裏返し 　 3D縦ズーム裏返し 　 ランダム3D縦横ズーム裏返し 　 3D横ズーム入れ替わり 　 3D縦ズーム入れ替わり 　 ランダム3D縦横ズーム入れ替わり 　 3D横ズーム逆入れ替わり 　 3D縦ズーム逆入れ替わり 　 ランダム3D縦横ズーム逆入れ替わり 　 CUBE横ズーム回転 　 CUBE縦ズーム回転 　 ランダム縦横ズームCUBE回転 　 3D横ズームスクロール 　 3D縦ズームスクロール 　 ランダム縦横ズームコーナー回転 　 射光型3D横ズームページめくり 　 射光型3D縦ズームページめくり 　 全回転型3D横ズームページめくり 　 全回転型3D縦ズームページめくり

アニメーションの縦横の動作方向がランダムなもの。
　 縦横スクロール 　 縦横視差スクロール 　 縦横入れ替わり 　 縦横転がり 　 縦横3D回転 　 縦横3D裏返し 　 縦横3D入れ替わり 　 縦横3D逆入れ替わり 　 縦横CUBE回転 　 縦横CUBE枠内回転 　 縦横コーナー回転 　 縦横連動ランダムズーム3D回転1 　 縦横連動ランダムズーム3D回転2

シャトル型。アニメーションの動作方向が、next・prevに関係なく、左右や上下や前後を繰り返す。
　 前後シャトル型zスクロール 　 左右シャトル型スクロール 　 上下シャトル型スクロール 　 左右シャトル型視差移動 　 上下シャトル型視差移動 　 前後シャトル型せり出し 　 左右シャトル型転がり 　 上下シャトル型転がり 　 左右シャトル型枠内CUBE回転 　 上下シャトル型枠内CUBE回転 　 左右シャトル型ズームCUBE回転 　 上下シャトル型ズームCUBE回転 　 左右シャトル型3D入れ替わり 　 上下シャトル型3D入れ替わり 　 左右シャトル型3D逆入れ替わり 　 上下シャトル型3D逆入れ替わり 　 左右シャトル型3D裏返し 　 上下シャトル型3D裏返し 　 左右シャトル型ドア回転 　 上下シャトル型ドア回転

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