・　サンプルの説明

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

　スライドショーがあるホームページのテンプレートです。 このページはデバイスの画面の大小によってナビゲーションのレイアウトが変化します。 大きい画面では上部は左右2列のレイアウトで、左側に縦3行のタイトルと4個のボタンが縦に並んでいます。 小さい画面ではタイトルが1行になり、その下部にボタンが横に並びます。 ページの右下に「▲」ボタンがありますが、不要な時はHTML最下部のスクロールアップボタン用のa要素とスタイルシートの該当部分を削除してください。

　スライドショーは同じサイズ（同じアスペクト比であれば可）の写真を使うスライドショーです。 アニメーションはです。 他のアニメーションへのリンクはこのページ最下部にあります。 操作ボタンは3個でスライドショー右下に半透明に表示されています。モバイルではタップ、パソコンではマウスを重ねると不透明になります。 スライドショー用の写真はクラス名"base"のdiv要素の中に、クラス名"koboData"のimg要素で記述してください。 バナーにする時は、クラス名"koboData"のa要素を使い、写真は背景画像にします。background-sizeの値は"cover"でも"contain"でも構いません。

　スライドショー表示部分のスタイルシートpadding-top:～%;の～部分に、「写真の高さ／写真の幅」を％で表した数値を書いてください。 小さいデバイスで表示してもアスペクト比を維持して縮小してレスポンシブデザインに対応できます。

　このサンプルは掲載しているソースコードのみで動きます。 jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。 個人・商用を問わず無料で自由に使用できます。 ご自身のリンクや写真に書き換え、スタイルシートをお好みのデザインに変更してお使いください。

⇔

・　統合版スライドショーがあるホームページのテンプレートのソース

　以下のソースコードはページ全体のもので、他のページに張り付けるものではありません。全体をコピーし、「メモ帳」などのテキストエディタに貼り付け、文字コードを「UTF-8」に設定し、拡張子を「.html」にし、お好みの「名前を付けて保存」してください。

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

前進と後進で動作方向が反転するもの。
　 スクロール横 　 スクロール縦 　 Z方向スクロール 　 視差スクロール横 　 視差スクロール縦 　 横転がり 　 縦転がり 　 横入れ替わり 　 縦入れ替わり 　 CUBE枠内横回転 　 CUBE枠内縦回転 　 アップダウン 　 ダウンアップ 　 ランダムアップダウン 　 せり出し 　 ランダム回転移動インアウト 　 ドア横回転 　 ドア縦回転 　 横3D回転 　 縦3D回転 　 円ワイプ

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

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

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

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