[オープン]全体が3ボタン操作のBLOCKスライドショーのホームページ BlHD_nsl_3b_zdw_os

・　サンプルの説明
　このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。
　画像や文章などをひとまとめにしたBLOCK要素のスライドショーを画面全体に表示したホームページのテンプレートです。 操作ボタンはスライドショー下部中央に半透明で表示されています。 モバイルではスライドショー内のタップで、パソコンではマウスを重ねると不透明になります。
　アニメーションはです。 他のアニメーションへのリンクはこのページ最下部にあります。
　BLOCK要素で画像のみを表示する場合はその背景画像に画像を設定します。 スタイルbackground-size:cover;で画面いっぱいに表示し、あたかも画像のスライドショーの様にする事もできます。また、background-size:contain;にすれば、形の違う画像を一定の枠内に表示できます。 スライドショーデータは「ここからスライドショーのデータ。↓」以下のクラス名koboDataの要素で書いてください。
　このページでは、スライドショーの左上にある「解説とソースを表示」をクリックするとスライドショーの下部に解説とソースコードが表示されますが、この機能はこの解説ページのみでスライドショーにはありません。
　このスライドショーは掲載しているソースコードのみで動きます。 jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。 個人・商用を問わず無料で自由に使用できます。

高さ維持型でレスポンシブに対応
⇔
全画面表示型でレスポンシブに対応
⇔


・　3ボタン横型スライドショー
　以下のソースコードはページ全体のもので、他のページに張り付けるものではありません。全体をコピーし、「メモ帳」などのテキストエディタに貼り付け、文字コードを「UTF-8」に設定し、拡張子を「.html」にし、お好みの「名前を付けて保存」してください。
　画像データは必ずご自身のものに書き換えてください。 このページの見本は画像のURLを相対表記で書いているため、このままでは画像が表示されません。





・　別のアニメーションを見る
前進と後進で動作方向が反転するもの。
　 スクロール横 　 スクロール縦 　 視差スクロール横 　 視差スクロール縦 　 透かしスクロール横 　 透かしスクロール縦 　 視差透かしスクロール横 　 視差透かしスクロール縦 　 Z方向スクロール 　 縦スウィング 　 縦ズームスウィング 　 横転がり 　 縦転がり 　 横入れ替わり 　 縦入れ替わり 　 CUBE枠内横回転 　 CUBE枠内縦回転 　 アップダウン 　 ダウンアップ 　 ダウンジャンプ 　 ランダムアップダウン 　 ランダム回転入れ替わり 　 せり出し 　 ランダム回転移動インアウト 　 ドア横回転 　 ドア縦回転 　 横3D回転 　 縦3D回転 　 円ワイプ

ランダムな方向に動作するもの、または方向性がないもの。
　 フェード 　 ランダム透かし移動インアウト 　 ダウンアップジャンプ 　 落下 　 起き上がり 　 透かし 　 blur 　 brightness 　 ランダムclip-polygon 　 ランダムclip-circle 　 ランダムズーム 　 ショットズーム回転 　 フラッシュ 　 ランダムワイプ

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

縦横方向がランダムで前進と後進は上下左右の方向性があるもの。
　 縦横スクロール 　 縦横視差スクロール 　 縦横透かしスクロール 　 縦横視差透かしスクロール 　 縦横入れ替わり 　 縦横転がり 　 縦横3D回転 　 縦横3D裏返し 　 縦横3D入れ替わり 　 縦横3D逆入れ替わり 　 縦横CUBE回転 　 縦横CUBE枠内回転 　 縦横コーナー回転

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




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