レスポンシブ対応スライドショービューア


・　サンプルの説明
　レスポンシブWebデザインのホームページでも使用できるスライドショービューアです。 本文中の写真をクリックすると、スライドショービューアがフェードで画面サイズに開き、その写真が表示されます。 スライドショーの切り替えアニメーションはです。 アニメーションの変更は、このページ最下部「別のアニメーションを見る」内のお好みのリンクをクリックしてください。
　ページ内の写真は、クラス名を"MiyakeSLViewer"にし、スタイルシートで縮小表示しておきます。 スライドショーは手動タイプで、 ボタンのクリックで前の写真、 ボタンで次の写真にアニメーションで進み、 ページ内のクラス名"MiyakeSLViewer"の写真の間でループします。 ビューアはスライドショーの写真部分のクリックで閉じます。 なお、ボタンは画像です。流用する時は画像の右クリックから同じホルダーに「名前を付けて保存」してください。
　このスライドショービューアは掲載しているソースコードのみで動きます。 jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。 個人・商用を問わず無料で自由に使用できます。
　この見本で使用している画像「砂漠に染井吉野が咲く異世界」は生成AIのCopilotで作ったものです。







・　レスポンシブ対応2ボタン手動スライドショービューア

⇔

ビューアを貼り付けるページソースの<head>から</head>の間に次をコピーしてください。

ビューアを貼り付けるページソースの<body>の直下に次をコピーしてください。

ページに表示されているの写真のソース。 スタイルシートで縮小表示してください。



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

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

ズーム3Dアニメーションを使ったもの。
　 ランダム縦横ズーム3D回転1 　 ランダム縦横ズーム3D回転2 　 3D横ズーム裏返し 　 3D縦ズーム裏返し 　 3D横ズーム入れ替わり 　 3D縦ズーム入れ替わり 　 3D横ズーム逆入れ替わり 　 3D縦ズーム逆入れ替わり 　 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.