- ・ サンプルの説明
-
このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください(「名前を付けて保存」で文字コードを指定するなど)。異なる文字コードが混在すると、文字化けの原因になります。
-
同じサイズ(同じアスペクト比であれば可)で連番のファイル名の写真を使うスライドショーです。
アニメーションはです。
他のアニメーションへのリンクはこのページ最下部にあります。
連番のファイル名とは、0.jpg・1.jpg・2.jpg~ や 12.jpg・13.jpg・14.jpg~ などの、連続する正の整数値として成り立つ数字をファイル名にした写真群です。
例えばファイル名が 700.jpg の写真は使えますが 007.jpg は使えません。
もちろん 2022_10.jpg や Y1953.jpg などの様に文字が入ったファイル名も使えません。
連番の最初の数字は何番でも構いません。
「書き換える部分」で最初と最後の数字と写真へのパスを設定してください。
-
操作ボタンは3個でスライドショー右下に半透明に表示されています。モバイルではタップ、パソコンではマウスを重ねると不透明になります。
-
写真表示部分のスタイルシートpadding-top:~%;の~部分に、「写真の高さ/写真の幅」を%で表した数値を書いてください。
小さいデバイスで表示してもアスペクト比を維持して縮小してレスポンシブデザインに対応できます。
-
このスライドショーは掲載しているソースコードのみで動きます。
jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。
個人・商用を問わず無料で自由に使用できますが、スクリプト内「カスタマイズ」の下にある著作権表記を消す事を禁止します。
アスペクト比維持型 |
|
⇔ |
|
- ・ 3ボタン横型スライドショー
- 写真表示部分のスタイルシートでpadding-top:~%;に写真の(高さ/幅)を%で書いてください。このサンプルは(3/4)の横長の写真を使っているため75%です。
以下のソースコードをスライドショーを貼り付ける場所にコピーし、ご自身の写真データに書き換えてください。
可能ならば、スタイルシート部分はHEAD内に移動してください。
- ・ 別のアニメーションを見る
- 前進と後進で動作方向が反転するもの。
スクロール横
スクロール縦
視差スクロール横
視差スクロール縦
横転がり
縦転がり
横入れ替わり
縦入れ替わり
CUBE枠内横回転
CUBE枠内縦回転
アップダウン
ダウンアップ
ランダムアップダウン
ランダム回転入れ替わり
せり出し
ランダム回転移動インアウト
ドア横回転
ドア縦回転
横3D回転
縦3D回転
円ワイプ
ランダムな方向に動作するもの、または方向性がないもの。
落下
起き上がり
透かし
brightness
ランダムclip-polygon
ランダムclip-circle
ランダムズーム
ショットズーム回転
フラッシュ
ランダムワイプ
ズーム3Dアニメーションを使ったもの。
ランダム縦横ズーム3D回転1
ランダム縦横ズーム3D回転2
3D横ズーム裏返し
3D縦ズーム裏返し
ランダム3D縦横ズーム裏返し
3D横ズーム入れ替わり
3D縦ズーム入れ替わり
ランダム3D縦横ズーム入れ替わり
3D横ズーム逆入れ替わり
3D縦ズーム逆入れ替わり
ランダム3D縦横ズーム逆入れ替わり
CUBE横ズーム回転
CUBE縦ズーム回転
ランダム縦横ズームCUBE回転
3D横ズームスクロール
3D縦ズームスクロール
All Rights Reserved. Copyright (C) 2002- Miyake_kobo.