css の animation を使った、写真が右からスライドインし、左にスライドアウトするタイプのスライドショーである。
サンプル
本サンプル表示用HTML
<div id="stage"> <div id="frame"> <div id="photo1"><img src="wp-images/1.jpg"></div> <div id="photo2"><img src="wp-images/2.jpg"></div> <div id="photo3"><img src="wp-images/3.jpg"></div> <div id="photo4"><img src="wp-images/4.jpg"></div> <div id="photo5"><img src="wp-images/5.jpg"></div> </div></div> |
HTMLの概要説明
・表示用写真（スライド）を全て#frame内に表示する。
（cssで全ての写真を、初期においては画面の右側に重ねて配置する）
本サンプル表示用CSS
#stage { position: relative; width: 600px; height:338; margin: 0 auto;}#photo1,#photo2,#photo3,#photo4,#photo5 { position: absolute; float: left; width: 600px; height: 338px; left:600px; -moz-animation: imgtrans 30s infinite; -webkit-animation: imgtrans 30s infinite; animation: imgtrans 30s infinite;}#photo1 { -moz-animation-delay: 0s; -webkit-animation-delay: 0s; animation-delay: 0s;}#photo2 { -moz-animation-delay: 6s; -webkit-animation-delay: 6s; animation-delay: 6s;}#photo3 { -moz-animation-delay: 12s; -webkit-animation-delay: 12s; animation-delay: 12s;}#photo4 { -moz-animation-delay: 18s; -webkit-animation-delay: 18s; animation-delay: 18s;}#photo5 { -moz-animation-delay: 24s; -webkit-animation-delay: 24s; animation-delay: 24s;}#frame { width: 600px; height: 338px; position: relative; overflow: hidden;}@-webkit-keyframes imgtrans { 0% { left:100%; } 5% { left:0%; } 20% { left:0%; } 25% { left:-100%; } 100% { left:-100%; }}@-moz-keyframes imgtrans { 0% { left:100%; } 5% { left:0%; } 20% { left:0%; } 25% { left:-100%; } 100% { left:-100%; }}@keyframes imgtrans { 0% { left:100%; } 5% { left:0%; } 20% { left:0%; } 25% { left:-100%; } 100% { left:-100%; }} |
CSSのポイント説明
・前稿のフェイドインアウト型と違って、配置、animationの設定を全て、写真（img）を格納するdiv（photo1,,,photo5）に設定している。こうしなければいけないという訳ではなく、どちらでも同じ結果になる。
・animationは、トータル30秒、繰り返しを設定。
・各写真は、animation開始時（0%）では画面の右側に位置していて、1.5秒（5％）かけて画面中央に表示される。そのまま20%まで表示され、次いで1.5秒で画面左に移動する。
（各写真は順次6秒ごとにanimateするので、代わりに、次のスライドが右からスライドインする）
いつもお世話になっております。
無断で使用させてもらってます。
以上よろしくお願いいたします。
お役にたてれば幸いです。
どんどんご活用ください。
「本サイトについて」の最後の項はお守りください。
いつもお世話になっております。
このスライドショーを使用させて頂きたいと思っております。
写真４枚でスライドを作成したいのですが、4枚目と1枚目の間に空白ページができてしまい困っています。
サンプルで掲載されているスライドのように最後の画像と最初の画像をスムーズに動かす方法を教えて頂けませんか？
申し訳ありませんが、よろしくお願い致します。
=>windows8 さん、こんにちは
このSAMPLEは、５枚の写真用のcodeになっています。
html、cssともに、PHOTO5関連の記述は削除されたでしょうか。
それと、このSAMPLEの場合、切り替え間隔が6秒ですから、トータル30秒で最初に戻ります。
写真が4枚ですと、トータル24秒になりますから、animation: imgtrans 30s infinite;の30を24に変えてください。その上、一枚当たりの表示時間が全体の1/4すなわち25%になりますから、
@keyframes imgTrans {
0% { left:100%; }
5% { left:0%; }
20% { left:0%; }
25% { left:-100%; }
100% { left:-100%; }
}
の20を25に、25を30にすべて変えてください。
tyosbb様
回答有難うございます。
無事にスライドショーを実装する事ができました。
また何かありましたら、よろしくお願い致します。
tyosbb様
重ね重ね申し訳ありません。
無事にスライドショーは実装できたのですが、見るプラウザによって動きが異なり困っています。
FirefoxとIEでは正常に動作しているのですが、クロームとサファリでは画像と画像の間に空白ページができてしまいます。
お手数をおかけして申し訳ありませんが、何か解決方法がありましたら教えて下さい。
よろしくお願い致します。
windows8様
>空白のページができてしまいます
とはどういうことでしょうか?
-webkit- のついている部分のコードをよく見直してください。
こちらのページに、SAMPLEを載せていますので、ソースコードを確認してください。
<a href="http://css.programming.jp/slideshow_slide_4photos.html" rel="ugc">http://css.programming.jp/slideshow_slide_4photos.html</a>
tyosbb様
回答とサンプルを有難うございました。
無事にクロームとサファリでも正常な動作を確認する事ができました。
原因はCSSの訂正ミスでした。空白ページは画像と画像が繋がって流れず、画像と画像の間に白い空間？ができてしまう事を説明したかったのですが、説明不足で申し訳ありません。
貴重なお時間を頂き有難うございました。
windows8様
うまくいってよかったですね。
これからもご活用ください。
いつもお世話になっております。
先日は適切なアドバイスを頂きありがとうございました。
申し訳ありませんが、またアドバイスを頂きたくコメントを致しました。
いつも4つのプラウザ（クローム，ＩＥ，Firefox，サファリ）で確認しつつ作業を進めているのですが、firefoxでのみスライドショーに異常が現れてしまいました。異常の内容は、スライドショーが半分欠けた状態で登場し、全体が現れまた半分欠けた状態で流れていきます。
tyosbb様のサンプルの2枚目（ピンク色の服に青い帽子の男性が山を登っている写真）にも同じような症状が現れていました。
原因を調べてはいるのですが、なかなか解決には至りません。もし、解決方法やFirefoxとの互換性について知っていたら教えて頂けませんか？
よろしくお願いいたします。
windows8さんこんにちは。
今、私もFirefoxで閲覧していますが、正常に表示されています。
ここに示したサンプルの場合、Firefoxでも正常に表示されるはずです。閲覧しているPCのメモリーの蓄積状態などが、影響しているのか、微妙な相性については私にもわかりかねます。
しかし現実に半分欠けた表示状態があるのでしょうから、私も気にかけて、原因がわかればお知らせしようと思います。ご指摘ありがとうございました。
tyosbb様
ご回答有難うございました。閲覧しているパソコンによって見え方も異なるんですね。
しばらくは、様子をみてみようと思います。
また何かありましたら、よろしくお願い致します。
Keep it coming, wrrites, this is good stuff.
Graet thanks.
tyosbb様
いつもお世話になっております。
前回の件は正常な動作を確認する事ができました。
何度も申し訳ありませんが、お時間がございましたらアドバイスをお願い致します。
前までは#photo1 に設定した画像がスライドショーの一番初めに表示されていたのですが、なぜか今は#photo4が一番初めに表示されます。画像の中身やCSSは変更していません。
スライドショーの動き方は#photo4で始まり数秒経過後#photo3が一瞬現れ、続くように#photo4が出てきて数秒経過後、#photo1が現れます。#photo1以降は正常に動作しています。
この画像を必ず一番初めに表示するCSSなどがありましたら、ご教授下さい。
申し訳ありませんが、よろしくお願い致します。
＞この画像を必ず一番初めに表示するCSSなどがありましたら、ご教授下さい。
#photo1が必ず初めに表示されるcssになっています。
スライドショーのページがロードされると、ただちに#photo1が登場します。
なぜ、Photo4から始まるのか、私にも見当がつきません。windows8さんがアップロードしているurlを教えてくれませんか。
tyosbb様
迅速な回答を有難うございます。
コメント欄のウェブサイトの項目にアドレスを入力いたしました。
申し訳ありませんが、よろしくお願い致します。
確かに、photo4が最初に表示されますね。
cssで#photo1のanimation-delayが0sになっていますか？
delayの小さいもの順に表示されます。
tyosbb様
回答有難うございます。
#photo1のanimation-delayは0sになっていました。
もう一度導入からやり直してみようと思います。
お忙しいなか、ありがとうございました。
tyosbb様
再度見直してみたところ、原因が分かりました。
また何かありましたら、よろしくお願い致します。
That's a shrewd answer to a tricky qutoeisn
はじめまして、ホームページ制作の勉強をしています。
今回こちらのコードを使わせていただきたいのですが、
画像をブラウザの幅に合わせて表示させるにはどのように変更したらよろしいでしょうか？
frameのwidthの数値を100％やautoにすると画像が表示されなくなります。
よろしくお願いいたします。
はじめまして。
「全画面（フルスクリーン）スライドショー」がフルサイズですが、こちらではいかがですか？
このDEMOで改造するには、#stage,#stage ul li,#stage .mask のwidthを100％、heightは無記述とし、<ul>・・・・・</ul> 記述の下に、
<div style="padding-top: 28%;"></div> を入れてください。28%は画像サイズに応じて調整してください。
記事内には『#stage ul li,#stage .mask のwidthを100%』こちらの要素が見当たらないのですが、何か見落としていますでしょうか？
スライドショーをブラウザの幅に合わせて拡大・縮小させ、
スマホでの閲覧にも対応させたいと考えております。
コメント欄にウェブサイトにアドレスを記載しました。
もしよろしければ助言いただけないでしょうか？
失礼しました。
違うDEMOについて解説してしまいました。
「スライドイン・アウト型スライドショー（レスポンシブ）」の稿が、目的に合致すると思いますので、そちらを見て下さい。
はじめまして
画像は11枚です
サイトにアクセスしたときは1～11の画像がスライドされるが
2回目のスライドは2の画像から表示される
5秒ごとに設定でトータル55秒の設定です
2回目のスライドは1の画像からスライドさせるには
どうすればいいでしょうか
はじめまして。
#photo1から#photo11まで、0から50まで、5sきざみのdelayが設定されていれば、photo1から開始されるはずですが。
ご確認ください。