このサイトの閲覧者の方から、画面サイズに対応して画像が縮小する、いわゆるレスポンシブ型にできないものかとの質問を受けました。確かに最近ではスマホ対応にしないことには、一人前にあらずということですから、以前に投稿した「フェイドイン・アウト型スライドショー」を例に、レスポンシブにしてみました。
サンプル
本サンプル表示用HTML
<div id="stage">
<div id="photo1" class="pic"><img src="wp-images/1.jpg"></div>
<div id="photo2" class="pic"><img src="wp-images/2.jpg"></div>
<div id="photo3" class="pic"><img src="wp-images/3.jpg"></div>
<div id="photo4" class="pic"><img src="wp-images/4.jpg"></div>
<div id="photo5" class="pic"><img src="wp-images/5.jpg"></div>
<div style="padding:28%;"></div>
</div>
HTMLのポイント説明
・このスライドショーの下に何か記述とか、他の要素を加えたい場合には、画像にposition:absoluteが指定されているため、スライドショーと、下の要素が重なってしまいます。
そこで、下の要素がスライドショー画像の下に表示されるように、<div style=”padding:28%;”></div>を画像タグの下に挿入します。28%は、画像の縦/横比の1/2から決めた値です。画像サイズによって調整してください。
本サンプル表示用CSS
#stage {
position: relative;
max-width:600px;
margin: 0 auto;
background:#ddd;
}
.pic {
position: absolute;
}
.pic img {
width: 100%;
height: auto;
opacity:0;
-moz-animation: imgTrans 40s infinite;
-webkit-animation: imgTrans 40s ease-in infinite;
animation: imgTrans 40s infinite;
}
#photo1 img {
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
#photo2 img {
-moz-animation-delay: 8s;
-webkit-animation-delay: 8s;
animation-delay: 8s;
}
#photo3 img {
-moz-animation-delay: 16s;
-webkit-animation-delay: 16s;
animation-delay: 16s;
}
#photo4 img{
-moz-animation-delay: 24s;
-webkit-animation-delay: 24s;
animation-delay: 24s;
}
#photo5 img {
-moz-animation-delay: 32s;
-webkit-animation-delay: 32s;
animation-delay: 32s;
}
@-webkit-keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
@-moz-keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
@keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
CSSのポイント説明
・「フェイドイン・アウト型スライドショー」との違いは、以下です。
#stage のwidthの指定を、max-width: としてheightは指定していない。
img のwidth指定を100％、height指定をauto としている。
#frameは削除している。
・画像にリンクを貼りたい場合は、@keyframes の7%に、
z-index:20; を追加する。
はじめまして。
フェイドイン・アウト型スライドショー（レスポンシブ）お借りしたいのですが、
画像の1枚目～4枚は無視され、5枚目だけが永遠と繰り替えされます。
何か対処法があればご教示お願いします。
yoshiさん、はじめまして。
どうしてでしょうね。
#photo1から#photo5まで、8sの間隔でdealayが設定されていますか。
もう一度、html,cssの記述を見直してください。
And I thought I was the sensible one. Thanks for setting me strhgiat.
レイアウトが崩れてしまう為
このcssを
#stage {
position : relative;
max-width : 600px;
margin : 0 auto;
background : #ddd;
}
.pic {
position : absolute;
}
.pic img {
width : 100%;
height : auto;
opacity : 0;
-moz-animation : imgTrans 40s infinite;
-webkit-animation : imgTrans 40s ease-in infinite;
animation : imgTrans 40s infinite;
下記の様に記述したのですが、これが原因でしょうか？
#stage {
position : relative;
max-width : 1000px;
margin-left : 0 auto;
background : #ddd;
height : 400px;
.pic {
position : absolute;
width : 1000px;
height : 400px;
}
.pic img {
width : 1000px;
height : 400px;
opacity : 0;
-moz-animation : imgTrans 40s infinite;
-webkit-animation : imgTrans 40s ease-in infinite;
animation : imgTrans 40s infinite;
}
他の部分のcssとhtmlは一緒です。
レイアウトが崩れるというのはどのようになるのでしょうか。
サイトのページのhtmlとcssの記述通りで、ご覧のようにうまく動いています。
ただし、画像サイズの縦横比がサンプルと違う場合は28％を補正してください。説明に書いてあります。
widthとheightを固定値で設定しますとレスポンシブにはなりません。
margin:0 auto; を、margin-left:0 auto; にしてはいけません。
#stage { の終わりの閉じかっこ } が抜けています。
以上ですがもう一度検討してください。
必ずできますよ。
追記ですが、画面左寄せに表示したい場合は、何も記載しないか、margin-left:0;にしてください。
その右に文字を入れたい場合は、float:left;にしてください。
Times are chgniang for the better if I can get this online!
Thank you for your comment.
連絡遅くなりました、すみません。
float: left;でできました！！ありがとうございます！！
何故こんな簡単な事に気付かなかったのか・・・・
自分が情けない・・・
出かけていて返事が遅くなりました。
解決してホッとしています。
こんにちは。
いつもお世話になってます。
フェイドイン・アウト型スライドショー（レスポンシブ）をお借りしたいのですが、画像が２枚の時のCSSの記述方法のアドバイス頂けたら幸いします。
nobuyukiさんこんにちは。
スライドが2枚ですから、photo1、photo2だけの記述になります。
8秒間隔2枚ですから、
animation: imgTrans 16s infinite;
となり、2枚目のdelayは、animation-delay: 8s;のままでいいです。
スライドの切り替えは、50%ですから、前後でFADEさせることを考えて、
@keyframes imgTrans {
0% { opacity:0; }
15% { opacity:1; }
45% { opacity:1; }
60% { opacity:0; }
100% { opacity:0; }
}
ぐらいですかね。15%,45%.,60%の数値は、好みで決めてください。
いろいろアドバイスありがとうございました。
はじめまして、いつも参考にさせて頂いてます。
早速質問なのですが、
このスライドショーを別々のページに置こうと考えているのですが、
表示するスライドの枚数、遷移時間を別々に設定しようとしてつまづいております。
cssの記述をどのようにすればよろしいでしょうか？
また、特定の1枚だけを長く表示させることは可能でしょうか？
ご教示頂けると嬉しいです、よろしくお願いいたします。
takkyuさんはじめまして。
例えば、スライド枚数を8枚、1枚毎の遷移時間を8秒としましょう。
トータルのanimationの秒数は、8×8=64sとなります。
トータルの秒数64sがanimation 100%ということになります。
1枚当たりの％は、100/8、すなわち、12.5%ということになります。すなわち、12.5%の間にFadeInして表示してFadeOutさせます。実際は、FadeOutするときに次のスライドがFadeInしますから、これを調節します。
上の例では、例えば以下のようなcssコードになります。
@keyframes imgTrans {
0% { opacity:0; }
3% { opacity:1; }
11% { opacity:1; }
14% { opacity:0; }
100% { opacity:0; }
}
3%、11%などの値は表示させてみて、好みで調整してください。
さて、1枚だけ表示時間を変えたい場合は、上の例で行くと、1枚だけ16秒にしたければ、トータルのanimationの秒数は、8×7+16=72sとなり、これが100%となります。
すなわち、短い表示時間のスライドは1枚当たり11%、長いものは22%となります。（1%はどこかで加えて補正します）
よって、
@keyframes imgTrans {
0% { opacity:0; }
2% { opacity:1; }
9% { opacity:1; }
11% { opacity:0; }
13% { opacity:1; }
20% { opacity:1; }
22% { opacity:0; }
24% { opacity:1; }
42% { opacity:1; }
44% { opacity:0; }
46% { opacity:1; }
53% { opacity:1; }
55% { opacity:0; }
1-4行の繰り返し
}
とし、anmation delay を長いスライドの次のスライドからは、長いスライドの表示に余計にかかった秒数を加えます。
ただし、このやり方は、スライドが完全にFadeOutしてから次のスライドがFadeOutすることになります。
スライドの遷移を重ねたければ、別建てのanimationを走らせて、animation delay でうまく重ねて表示させることになりますが、複雑なので省略します。
以上から、ご検討ください。
返答遅くなってしまい申し訳ありません、
アドバイスありがとうございます。
ちなみに、個々のページに別のスライドショーを掲載する際には、
stage1,stage2,stage3…と別に記述するだけでなく、
html内とcss内の画像(photo1,photo2…)の方も別記述するべきだと自己解決しました。
失礼いたしました。
初歩的な質問で申し訳ないのですが。。。
fc2ショッピングカートで使用させていただこうと考えています。
実際に設置し、問題なく動作はしています。
そこで、画像に商品ページのリンクを貼ったのですが、
画像5枚とも、5枚目の画像に貼ったリンク先へ飛んでしまいます。
どう直したらよいのでしょうか。
sachiさんこんにちは。
このタイプは、画像が５枚重なっていて、５枚目が一番上にあります。したがって、opacityが0になっていても、5枚目が常にクリックの対象になってしまい、5枚目のリンク先に飛んでしまうのです。
対策としては、opacityが0->1の0のタイミングでdisplay:block;とし、1->0 の0のタイミングで、display:none;として、表示されているスライドのみを表示するようにします。
あるいは、スライドイン・アウト型を使えば、対象スライドのみ枠内に表示されますから、解決します。
私としては、二つ目のスライドイン・アウト型をお勧めしますが、いかがでしょうか。
お返事ありがとうございます。
スライドイン・アウト型に変更してリンクも問題なく貼れました。
フェイドイン・アウト型の修正については、なんとなく分かりました。
本当にありがとうございました。
解決してよかったですね。
確かに、リンクを貼るところまでは気が回っていませんでした。
機会があったら、それを加味したscriptを公開したいと思います。
Most help articles on the web are inaccurate or inehceront. Not this!
Great thanks.
お世話になります。
スライド2枚のタイプで、５秒間隔で以下のように設定しております。
animation: imgTrans 10s infinite;
2枚目のdelayは、animation-delay: 5s;
しかし、2枚目スライド後に20秒間ほどグレーの背景が出てきてしまします。
スマートフォンでの使用です。
なにか改善策があればご教示ください。
宜しくお願い致します。
こんにちは。
animationの記述はどうなっていますか?
スライドが2枚ですから、５０％で入れ替えになります。
上の、nobuyuki さんの質問・回答を見てください。
でも、20秒も背景になるのはおかしいですね。
早速のご返信ありがとうございます。
@keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
上記で行いましたが、うまくいきませんでしたので
下記で再試行いたしました。
@keyframes imgTrans {
0% { opacity:0; }
15% { opacity:1; }
45% { opacity:1; }
60% { opacity:0; }
100% { opacity:0; }
}
しかしながら、どちらもうまくいきませんでしたので
スライドイン・アウト型へ変更いたしました。
お手間お掛けしました。
ありがとうございました。
スライドイン・アウト型ではうまくいき、フェイドインアウト型ではうまくいかないのはどうしてでしょうね。
蛇足かもしえませんが、以下でうまくいくはずです。
.pic img {
width: 100%;
height: auto;
opacity:0;
animation: imgTrans 10s infinite;
}
#photo1 img {
animation-delay: 0s;
}
#photo2 img {
animation-delay: 5s;
}
@keyframes imgTrans {
0% { opacity:0; }
15% { opacity:1; }
45% { opacity:1; }
60% { opacity:0; }
100% { opacity:0; }
}
わざわざありがとうございます。
早速やってみて、背景はでてこなくなりました！
しかし今度は画像が同じ位置にでてこなくなってしまいました、、。
画像が２段になり、上下でフェイドイン・アウトになってしまいます。
また、スライド式も背景がでてきてしまうので
同じ画像を交互に挿入してやっております。
いろいろとご教示ありがとうございました。
すみません！
pic {
position: absolute;
}
が抜けていたみたいで、できました！
本当にありがとうございました。
次はサムネイル用ロールオーバーに挑戦したく思います。
解決おめでとうございます。
次も頑張ってください。
はじめまして。
フェイドイン・アウト型スライドショー（レスポンシブ）をお借りしたいのですが、５枚目の画像を消さずに残す方法がありましたらご教示願います。
現在制作中のホームページのトップページに使用するつもりなのですが、スライドショーの終わりの５枚目に重要なメッセージを表示して固定させたいと考えています。
よろしくお願いいたします。
kemasukeさんこんにちは。
animation-fill-mode: forwards;を加えれば、100%で止まったままになります。
ところが、このanimationは、100%では、フェードアウトして消えてしまいますので、一工夫が人用です。
まず、今の記述の .pic img { の最終行に、animation-fill-mode: forwards;を記述してください。
こうすると、1枚目から4枚目まではanimationを繰り返しません。
5枚目については別扱いにします。
htmlで、class="pic"となっているところを、class="pic2"とします。
cssで、以下のように、別建ての記述にします。
.pic2 img {
opacity:0;
animation: imgTrans2 40s;
animation-fill-mode: forwards;
}
@keyframes imgTrans2 {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:1; }
100% { opacity:1; }
}
これでうまくいきますので、試してみてください。
追加です。読み返していて気が付きました。
animation-fill-mode: forwards;を付け加えないでも、
animation の infinite を削除すればOKです。
お返事ありがとうございます。
早速試してみたところ、大成功でした。
ＨＰの完成にはまだまだ時間がかかりそうですが、
大きく前進したことは間違いありません。
本当にありがとうございました。
お役に立ててうれしいです。
一歩一歩前進してください。
はじめまして。
サイトを作る際に参考にさせていただいております。
スマホサイトでは何とかスライドショーを表示させることができたのですが、PCサイトでは何故か全画面表示の時は5枚分の画像が縦に並びスライドしません。
しかし、ウィンドウを狭め左右の余白がない形になるとスライドショーがはじまります。
CSSの事はよくわからないのでこちらのソースを
・画像の名前
・
上記の2点のみ変更して使用させていただいておりますので、何が原因なのか検討もつきません。
何か改善手段があったら、ご教授いただけたら幸いです。
rioさん、はじめまして。
変更した２点目の記述がありませんね。
思い当たる点が思い浮かびませんね。画像が縦に並ぶということは、position:absolute;が反映されていないということですが、画面を狭めると正常になるというところがわかりません。
クラス名の、.picと#stageのposition:relative;がきちんと定義されているか確認してください。
今のところ、それ位しかアドバイスできませんが、、、
すみません、抜けておりました。
変更した箇所は画像のサイズだったのですが、本日cssを上の方に入れてみたら全て解決しました。
別の箇所のスタイルがおかしくて影響してしまった様です。
大変申し訳ありません。
この度はご指摘ありがとうございました。
解決してホッとしました。
そんなこともあるんですね。
いいサイトができますように。
大変参考にさせていただいております。
１０枚の画像を５秒ごとに表示させる・・・まではよかったのですが、
最後の画像がずっと残ってしまい、２巡目以降の一枚目がほとんど表示されることなく
２枚目に移行してしまいます。
@keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
この％の計算方法がよくわからないので、教えていただけませんでしょうか？
おはようございます。
5秒ごとですから、トータル50秒、delayが+5秒まではできていると思います。
animation の記述ですが、これは5枚用の記述ですから、１０枚用では、各%について半分にしなければなりません。5枚用は20%で切り替えるのですが、10枚用は10%で切り替える必要があります。
7->3.5、18->9、25->12.5 としてください。
ありがとうございました！！
おかげでスムーズに切り替わるようになりました。
流石です！！！！
どういたしまして、お役に立てて幸いです。
今後とも当サイトをよろしく。
The paragon of untdrsdaneing these issues is right here!
Thank you for your comment.
はじめまして、フェードインアウト型でどうしてもリンクをそれぞれに張りたいのですが以前の問いを参考にしてもわからなかったのでCSSの書き方を教えてもらえませんでしょうか？
kazanoさん、はじめまして。
スライドショー（フェードイン・アウト型）で、西村茂美さんから同じ質問が寄せられています。その回答を参考にしてください。なお、レスポンシブ型でのサンプルを、以下に掲載しました。
<a href="http://css.programming.jp/pages/slideshow_fade_2_link.html" rel="ugc">http://css.programming.jp/pages/slideshow_fade_2_link.html</a>
CODEは、ソースで確認してください。
ごめんなさい。上のSAMPLEは、firefoxではリンクが効かないようです。
次のページは、スライド型を併用したもので、firefoxでもうまくいきます。
ページソースを見て、参考にしてください。
<a href="http://css.programming.jp/pages/slideshow_slide&fade_responsive.html" rel="ugc">http://css.programming.jp/pages/slideshow_slide&fade_responsive.html</a>
いつも参考にさせていただいております。
<a href="http://css.programming.jp/pages/slideshow_fade_2_link.htmlのサンプルですが、数分表示していると、画像とリンクの切り替わるタイミングがずれてくるようです。この点を改善することはできますでしょうか？" rel="ugc">http://css.programming.jp/pages/slideshow_fade_2_link.htmlのサンプルですが、数分表示していると、画像とリンクの切り替わるタイミングがずれてくるようです。この点を改善することはできますでしょうか？</a>
また、
<a href="http://css.programming.jp/pages/slideshow_slide&fade_responsive.html" rel="ugc">http://css.programming.jp/pages/slideshow_slide&fade_responsive.html</a>
はページが見つかりませんでした。
akiさんこんにちは。
リンクは画像に貼られていて、画像が切り替えられます。
したがって、タイミングがずれることはないはずですが、どのような現象なのでしょうか。
<a href="http://css.programming.jp/pages/slideshow_slide&fade_responsive.html" rel="ugc">http://css.programming.jp/pages/slideshow_slide&fade_responsive.html</a>
は、存在します。
#038;が表示されていますが、不要です
ご返信ありがとうございます。#38;を消したら見ることができました。
<a href="http://css.programming.jp/pages/slideshow_slide&fade_responsive.htmlも数分するとやはり同じ現象が起きました。" rel="ugc">http://css.programming.jp/pages/slideshow_slide&fade_responsive.htmlも数分するとやはり同じ現象が起きました。</a>
edgeで見たときですが、ページを読み込んですぐは、画像とリンクが同じタイミングで切り替わっていきます。ページを読み込んで1～２分すると1枚目のリンクがyohooではなく5枚目のgoogleのままになったり次第にずれいき、画像と画像の間にも真っ白な空白時間ができてきます。最後には真っ白で何も表示されなくなり、カーソルを置くとリンクだけ切り替わっています。edgeのバグでしょうか？
確かにおかしいことを確認しました。ご指摘ありがとうございました。
animationの記述で最後のスライドが一番上に残っている状態でしたので、以下の様に書き換えました。
@keyframes imgTrans {
0% { opacity:0; z-index:10; }
7% { opacity:1;}
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0;z-index:0; }
}
また、HTMLの記述も雑でしたので書き換えました。
サイトのページを更新しましたので、キャッシュを除いたうえで、ご覧ください。何度かページを更新すればいいです。
ご対応ありがとうございます。
更新後のページを確認しました。ソース変更されております。
しかしながら、
slideshow_slide&fade_responsive.htmlのほうは、やはりedgeで数分見ていると同じ現象が起きてしまいました。最後は画像が表示されなくなり、リンクだけが切り替わっていきます。
slideshow_fade_2_link.htmlのほうは、数分見ていても画像がきちんと表示され続けますが、リンクと画像が少しずつずれていきます。
IE11とclomeでは問題なく表示されておりますので、やはりedgeが原因でしょうか？
slideshow_fade_2_link.htmlをEdgeで確認しましたが、私の環境では画像とリンクのずれは全く生じていません。どうなんでしょうね。
FireFoxでも正常表示されます。
slideshow_slide&fade_responsive.htmlの方は、
@keyframes imgTrans { の中の記述を
99.99% { opacity:0;left:100%;z-index:0; }のように変えていただければ、いいと思います。
slideshow_slide&fade_responsive.htmlで起きている現象を動画キャプチャしました。
<a href="http://itdaki.html.xdomain.jp/index02.html" rel="nofollow ugc">http://itdaki.html.xdomain.jp/index02.html</a>
読み込みから1分半くらいからの映像です。空白の伸びが伝わりますでしょうか？5～6分後には画像無しでリンクのみになりました。
「slideshow_slide&fade_responsive.html」で
99.99% { opacity:0;left:100%;z-index:0; に書き換え、
webkitやmoz記述を削除しました。
もう一度サイトのページを確認してください。
私の環境のEdgeでは正常に表示されます。
「99.99% { opacity:0;left:100%;z-index:0; に書き換え、
webkitやmoz記述を削除」、ソース更新されておりますがやはり同じ現象が起きてしまいました。こちらの環境の問題も考え、Edgeの再インストール、他のPCのEdgeで見るなどしましたが、やはり同じ現象を確認しております。
返信できなくなり残念です。複数回のご対応ありがとうございました。
どうなんでしょうね。このサイトのサンプルページを見てのことと思うのですが、
私の環境のEdgeでは、10分以上の表示でも、表示、リンクの異常は発生しません。
なおご質問があれば、tyosbb@ybb.ne.jp 宛にメールをください。
先日フェイドイン型フォトギャラリー（レスポンシブ）で質問させていただいた。abdです。
早速ご質問にご回答いただき感謝しております。
#stage2の動作が確認できません。(htmlの.pic2を.picにすると動作しますが#stageと同タイミングになるため写真が消えている時間が長くなります）
イメージは#stageで５枚を２５秒で繰り返し、#stage2は２枚を16秒で表示したいと考えております。
何度も試行錯誤をしてみたのですが、解決できずに困っています。ご教授いただけませんでしょうか？
htmlは以下の通りです。
cssは以下の通りです。
#stage {
position: relative;
max-width:600px;
margin: 0 auto;
background:#ddd;
}
.pic {
position: absolute;
}
.pic img {
width: 100%;
height: auto;
opacity:0;
-moz-animation: imgTrans 25s infinite;
-webkit-animation: imgTrans 25s ease-in infinite;
animation: imgTrans 25s infinite;
left:10%;
}
#photo1 img {
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
#photo2 img {
-moz-animation-delay: 5s;
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
#photo3 img {
-moz-animation-delay: 10s;
-webkit-animation-delay: 10s;
animation-delay: 10s;
}
#photo4 img{
-moz-animation-delay: 15s;
-webkit-animation-delay: 15s;
animation-delay: 15s;
}
#photo5 img {
-moz-animation-delay: 20s;
-webkit-animation-delay: 20s;
animation-delay: 20s;
}
@-webkit-keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
@-moz-keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
@keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
—————————————————————————-
#stage2 {
position: relative;
max-width:600px;
margin: 0 auto;
background:#ddd;
}
.pic2 {
position: absolute;
}
.pic2 img {
width: 100%;
height: auto;
opacity:0;
-moz-animation: imgTrans2 16s infinite;
-webkit-animation: imgTrans2 16s ease-in infinite;
animation: imgTrans2 16s infinite;
left:10%;
}
#photo21 img {
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
#photo22 img {
-moz-animation-delay: 8s;
-webkit-animation-delay: 8s;
animation-delay: 8s;
@-webkit-keyframes imgTrans2 {
0% { opacity:0; }
15% { opacity:1; }
45% { opacity:1; }
60% { opacity:0; }
100% { opacity:0; }
}
@-moz-keyframes imgTrans2 {
0% { opacity:0; }
15% { opacity:1; }
45% { opacity:1; }
60% { opacity:0; }
100% { opacity:0; }
}
@keyframes imgTrans2 {
0% { opacity:0; }
15% { opacity:1; }
45% { opacity:1; }
60% { opacity:0; }
100% { opacity:0; }
}
abd さん、ごめんなさい。
このコメント欄には、html形式のコードが表示されません。私も困っているのですが。
<は＆ｌｔ；、>は＆ｇｔ；を半角でで記述すれば表示されます。面倒ですね。
２番目のスライドショーは、htmlで、id="stage2" のようにすべてに2が付加されていますか？
早速のご返答ありがとうございます。
htmlは以下のように記述してあります。
ご回答にあったように原則的にコピペのネーミングの後に2をつけてあります。
※＜＞は（ ）に変換してみました。
（div id="stage"）（/div）
（div id="photo1" class="pic"）（img src="img/slide1.png"）（/div）
（div id="photo2" class="pic"）（img src="img/slide2.png"）（/div）
（div id="photo3" class="pic"）（img src="img/slide3.png"）（/div）
（div id="photo4" class="pic"）（img src="img/slide4.png"）（/div）
（div id="photo5" class="pic"）（img src="img/slide5.png"）（/div）
（div style="padding:16%;"）（/div）
（div id="stage2"）
（div id="photo21" class="pic"）（img src="img/under-slide1.png"）（/div）
（div id="photo22" class="pic"）（img src="img/under-slide2.png"）（/div）
（div style="padding:23%;"）（/div）
よろしくお願いします。
htmlにもcssにもミスがあります。
html: stage の</div>は、stageの記述の最後に記します。stage2の締めくくりの </div> が抜けています。
css: #photo22 img の項の締めくくりの } が抜けています。
以上を直して、試してください。
追記です。
div id=”photo21″ class=”pic”のpicは、pic2に。
早速のご回答にありがとうございます。
先程ご教授どおり修正したところ、イメージ通りになりました。
流石としか言いようがありません。感服いたしました。
何度も記述を見直しをしたつもりだったのですが、面目ありません。
本当にありがとうございました。
解決おめでとうございます。
いいページになりますよう、ご活用ください。
はじめまして。こちら単純な質問で申し訳ございませんが
切り替えの秒数を全体的に今の半分くらいの速度に変更したいのですがどうすればよろしいでしょうか。よろしくお願い致します。
mm-mさん、はじめまして。
このサンプルの例は、スライド5枚で、トータル40秒でanimationを設定しています。
したがって、半分ですと、20sとなり、delayが8s -> 4s(4s間隔)となります。
これで試してください。
ありがとうございます、少し早く表示する事が出来ました。ありがとうございました！
どういたしまして。
今後も、ご活用ください。
こんにちは、はじめまして。
こちらのスライドショーを、３枚で回したいと思いキーフレームの割合を変えてみているのですが、うまくいきません。どうしても２週目で１枚目の画像の表示時間が短くなってしまいます。
割合の計算がにがてなんですが、どうしても３枚でまわしたいんです・・・！すいませんがたすけてください；；
linkさん、はじめまして。
3枚にするには、
(1).pic img のanimationのトータル時間を、24sにします。
(2)anmation-delayの値は、0s,8s,16sそのまま
(3)animationは、例えば、以下のようにします。
@keyframes imgTrans {
0% { opacity:0; }
23% { opacity:1; }
33% { opacity:1; }
43% { opacity:0; }
100% { opacity:0; }
}
返信が遅くなってすみません！
(*´ｰ｀)ありがとうございます、動作確認も問題なかったのでこのまま使っていきたいと思います。
本当にありがとうございました！
お役に立てて良かったです。
どうぞご活用ください。
はじめまして。
レスポンシブルのスライドショー流用させて頂いております。
現在、max-width: 640px で設定しているのですが、
元々の画像がもっと大きい画像（980px）なもので、PC時縮小せずに表示できないものかと考えています。
実現方法をご教授願えないでしょうか？
こんにちは。
そのまま、max-width:980px; とすればOKですが、何か問題があるでしょうか。
失礼しました(^^;
max-width: 640pxでないとモバイル時に画像がはみ出すのではと思い込んでおりました。
どうもありがとうございました。m(_ _)m
どういたしまして。
ご活用ください。
シンプルで見易くとても助かっております、
フェイドイン・アウト型スライドショー（レスポンシブ）の上品な味付けが気に入り、
是非使わせて頂こうと思ったのですが、
画面を横に広げると描画領域に対し、スライドショーだけが広がり切らずに背景が覗いてしまいます、
これは仕様として仕方のないことでしょうか？
.stage {
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
float: left;
}
スライドショーのサイズを大きくすることは可能で、
#stage { 内に max-width:1000px; というように記述してください。
width;100%; では、何に対して100%なのかわかりません。
.stage となっているので、違う構成になっているのかとも思いますが、
以上を参考にしてください。
ありがとうございます！
BODYにmax-widthを指定することで解決しました、
お手数をお掛けしました、
やっとうまい酒が飲めそうです！
解決おめでとうございます。
これからも当サイトをご活用ください。
こちらのスライドショーを利用したいのですが、登録画像をランダム表示させることは可能でしょうか
純CSSによるスライドショーでは、ランダム表示させることはできません。
CSSには、ランダム数値を計算する関数定義ができないからです。
Flash 、もしくは、Javascript などを使ったスライドショーを使ってください。
分かりました。ご丁寧にありがとうございます
どういたしまして。
引き続き、本サイトをご活用ください。
初めまして
ホームページ作成に参考にさせていただいています。
フェイドイン・アウト型スライドショー（レスポンシブ）に画像ごとにリンクを張りたいと思っています。
以前同じような質問がありましたが
”このタイプは、画像が５枚重なっていて、５枚目が一番上にあります。したがって、opacityが0になっていても、5枚目が常にクリックの対象になってしまい、5枚目のリンク先に飛んでしまうのです。
対策としては、opacityが0->1の0のタイミングでdisplay:block;とし、1->0 の0のタイミングで、display:none;として、表示されているスライドのみを表示するようにします。”
このタイミングと挿入箇所について具体的に教えていただきたいです。
@-webkit-keyframes imgTrans {
0% {display:none;opacity:0;}
7% { opacity:1;display:none;}
18% { opacity:1;display:none;}
25% { opacity:0; display:block;}
100% {display:none; opacity:0;}
}
@-moz-keyframes imgTrans {
0% {display:none;opacity:0;}
7% { opacity:1;display:none}
18% { opacity:1;display:none;}
25% { opacity:0;display:block;}
100% {display:block; opacity:0;}
}
@keyframes imgTrans {
0% {display:none;opacity:0;}
7% { opacity:1;display:none;}
18% { opacity:1;display:none;}
25% { opacity:0; display:block;}
100% {display:none; opacity:0;}
}
適当に入れてみた物ですが、どこに入れたらいいのでしょうか？
お忙しい所申し訳ありませんがよろしくお願いいたします。
BOSSさんはじめまして。
どこかで同じ質問に答えたような気がしますが、
0%に、z-index:10; を付け加えてください。
これだけで、機能するはずです。
ご質問ですが、0%でFadeInが開始しますので、この時点で、display:block;
25%でFadeOutしますので、この時点で、display:none; となります。
ありがとうございます。
週末にやってみます。
お時間いただきありがとうございました。
はじめまして。ホームページトップにスライドを設置したく参考にさせていただいております。
スライドショーの下に余白300pix位の余白ができてしまうのですが、詰める方法はありますでしょうか。
なかなか解決できないため質問いたしました。よろしくお願いいたします。
はじめまして。
写真の縦横比によって、paddingの値を調整する必要があります。
<div style="padding:28%;"></div>
の28%の値を、小さくして調整してみてください。
早々のご回答をいただきまして、数か月悩んでおりましたこと一瞬で解決しました。感謝いたします。この度は本当にありがとうございました。
どういたしまして。
お役に立ててうれしいです。
はじめまして。初心者です。
こちらのオールインワンタイプが今作っているHPのイメージ通りだったのでコピペさせていただきましたが、わからない事だらけになりすみませんが質問させてください。
まずそのままコピペした段階ではスライド写真と送りボタンが出ず、スライド表示ボタンが"？"になったので
HTMLのスライド表示ボタンとスライド写真のところを自分のに書き換えました。スライドボタンは上手く表示されましたが、スライド写真は何も表示されません。
送りボタンが出ているであろうとこをにポインタを持っていくと手の形になるので何かしらある気配はありますが表示がなされません。
CSSでstageの色やサイズをいじってみたり、スライド写真のサイズを表示したいサイズ（少し大きめ）にいじってみたりしますが、やはり送りボタンとスライド写真が表示されず途方に暮れてしまいました。他の数値を変えるべきなのでしょうか。
ど素人のためこれ以上進めずにおります。よろしくお願いします。
すみません。
もう一度、該当する投稿から質問し直してください。
コピペで結構です。
初めまして、素人のものです。
会社のサイトを作成中で、リンク付きフェイドインアウトをTOPに入れたいと思っています。
同じ質問の方もおられたので参考にし編集をしたのですが
どうしても最後の画像に貼ったリンク先に飛んでしまいます。
同じ質問で申し訳ないのですが、みていただければと思います。
画像3枚を繰り返し表示させたいのは以前の質問でクリアできました。
・それぞれにリンクを貼りたい
・UPすると、画像の真ん中上部に〇〇〇〇〇が表示されるのを消したい
・下に●〇〇と今何枚目の画像が表示されているのかが分かる様にしたい
以上3点を追加したいです。
よろしくお願いいたします。
———————————-
#stage {
position: relative;
max-width:1250px;
max-hight:622px;
margin: 0 auto;
background:#ffffff;
}
.pic {
position: absolute;
}
.pic img {
width: 100%;
height: auto;
opacity:0;
-moz-animation: imgTrans 24s infinite;
-webkit-animation: imgTrans 24s ease-in infinite;
animation: imgTrans 24s infinite;
}
#photo1 img {
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
#photo2 img {
-moz-animation-delay: 8s;
-webkit-animation-delay: 8s;
animation-delay: 8s;
}
#photo3 img {
-moz-animation-delay: 16s;
-webkit-animation-delay: 16s;
animation-delay: 16s;
}
@-webkit-keyframes imgTrans {
0% { opacity:0; z-index:10; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
@-moz-keyframes imgTrans {
0% { opacity:0; z-index:10; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
@keyframes imgTrans {
0% { opacity:0; z-index:10; }
23% { opacity:1;}
33% { opacity:1; }
43% { opacity:0; }
100% { opacity:0; }
}
～～～～body～～～～～
<a href="URL1" rel="nofollow"></a>
<a href="URL2" rel="nofollow"></a>
<a href="URL3" rel="nofollow"></a>
島さんはじめまして。
確かにこのCodeでは、リンクは全部3番目のリンクに飛んでしまいます。
私の説明不足ですのでご勘弁ください。
このCodeでは、.pic img にanimationが付与されていますが、.pic にanimation を付けないと z-index が効かないようです。
前の質問にもお答えしたように、次のページのページソースを参考にしてください。
<a href="http://css.programming.jp/pages/slideshow_fade_2_link.html" rel="ugc">http://css.programming.jp/pages/slideshow_fade_2_link.html</a>
あるいは、HTML記述で、
<div id="photo1" class="pic"><a href="url1" rel="nofollow"><img src="****.jpg"></a></div>
とすればいかがですか。
回答ありがとうございます！
3枚同時に表示されてしまうなど問題が多発したので、
参考ページのソースと一度総入れ替えしたところ解消いたしました。
やっと前に進めました。本当にありがとうございました。
良かったですね。
ご活用ください。
年寄りでホームページを作ろうとしている所です。
そこでフェイドイン・アウト型スライドショー（レスポンシブ）を
お借りして、ウィンドウ幅いっぱいの写真にしたいと思っています。
Headerとnavは広がっているのですが、＃stageのmax-width: 1000px;にしても
写真（980px×490px）がウィンドウ幅いっぱいに広がりません。
ウィンドウ幅いっぱいの写真にするにはどうすればいいのでしょうか。
ウインドウ幅とは、ディスプレイ全幅のことですか? それとも、1000pxのウインドウを設定しているのでしょうか。
max-width: 1000px; にすれば、stageは1000pxになり、写真（980px幅）がほぼ収まります。
ディスプレイ全幅の場合は、width:100%; としますが、用意する写真幅は1920px必要です。
言葉足らずですみません。ディスプレイ全幅のことです。フェイドイン・アウト型スライドショー（レスポンシブ）を入れる前は１枚の写真（980px×490px）でディスプレイ全幅に広がりましたので、てっきりmax-width: 1000px;にすれば広がってくれるのだと思っていました。写真を（1920px×960px）にしたらディスプレイ全幅に広がってくれました。知識不足でお手数をおかけしました。本当に有難うございました。
解決おめでとうございました。
ご活用ください。
最初に6枚目の画像でフリーズし、その後正常動作になります。フリーズを解消したいです。
■CSS
#aspslide{
position: relative;
width: 1100px;
height: 500px;
overflow:hidden;
padding:0!important;
}
.asnakami{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding:0!important;
}
#asnakami1{
-moz-animation: fadeinout 30s 0s infinite;
-webkit-animation: fadeinout 30s 0s infinite;
-o-animation: fadeinout 30s 0s infinite;
animation: fadeinout 30s 0s infinite;
}
#asnakami2{
-moz-animation: fadeinout 30s 5s infinite;
-webkit-animation: fadeinout 30s 5s infinite;
-o-animation: fadeinout 30s 5s infinite;
animation: fadeinout 30s 5s infinite;
}
#asnakami3{
-moz-animation: fadeinout 30s 10s infinite;
-webkit-animation: fadeinout 30s 10s infinite;
-o-animation: fadeinout 30s 10s infinite;
animation: fadeinout 30s 10s infinite;
}
#asnakami4{
-moz-animation: fadeinout 30s 15s infinite;
-webkit-animation: fadeinout 30s 15s infinite;
-o-animation: fadeinout 30s 15s infinite;
animation: fadeinout 30s 15s infinite;
}
#asnakami5{
-moz-animation: fadeinout 30s 20s infinite;
-webkit-animation: fadeinout 30s 20s infinite;
-o-animation: fadeinout 30s 20s infinite;
animation: fadeinout 30s 20s infinite;
}
#asnakami6{
-moz-animation: fadeinout 30s 25s infinite;
-webkit-animation: fadeinout 30s 25s infinite;
-o-animation: fadeinout 30s 25s infinite;
animation: fadeinout 30s 25s infinite;
}
@-moz-keyframes fadeinout {
0% { left:0%; opacity:0;}
5% { left:0%;opacity:1; }
20% { left:0%; opacity:1;}
25% { left:0%;opacity:0; }
26% { opacity:0;left:100%; }
99.99% { opacity:0;left:100%; }
100% { opacity:0;left:0%; }
}
@-webkit-keyframes fadeinout {
0% { left:0%; opacity:0;}
5% { left:0%;opacity:1; }
20% { left:0%; opacity:1;}
25% { left:0%;opacity:0; }
26% { opacity:0;left:100%; }
99.99% { opacity:0;left:100%; }
100% { opacity:0;left:0%; }
}
@-o-keyframes fadeinout {
0% { left:0%; opacity:0;}
5% { left:0%;opacity:1; }
20% { left:0%; opacity:1;}
25% { left:0%;opacity:0; }
26% { opacity:0;left:100%; }
99.99% { opacity:0;left:100%; }
100% { opacity:0;left:0%; }
}
@keyframes fadeinout {
0% { left:0%; opacity:0;}
5% { left:0%;opacity:1; }
20% { left:0%; opacity:1;}
25% { left:0%;opacity:0; }
26% { opacity:0;left:100%; }
99.99% { opacity:0;left:100%; }
100% { opacity:0;left:0%; }
}
■HTML
<a href="https://shop.island-style.jp/shopbrand/001/X/" rel="nofollow"></a>
<a href="https://shop.island-style.jp/shopbrand/003/X/" rel="nofollow"></a>
<a href="https://shop.island-style.jp/shopbrand/ct63/" rel="nofollow"></a>
<a href="https://shop.island-style.jp/shopbrand/001/X/" rel="nofollow"></a>
<a href="https://shop.island-style.jp/shopbrand/003/X/" rel="nofollow"></a>
<a href="https://shop.island-style.jp/shopbrand/ct63/" rel="nofollow"></a>
<!–aspslide–>
サンプルは、5枚のスライドで構成されています。
したがって、@keyframes の記述で、100/5=20％で切り替えるようにしています。
スライドが、６枚になると、16.6%で切り替えないといけません。実際は、切り替えの様子を見て、その前後に切り替え（フェイド）が来るようにセットしてください。