フェイドイン・アウト型スライドショー

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;
	width: 600px;
	height: 338px;
}
#photo1 img,#photo2 img,#photo3 img,#photo4 img,#photo5 img {
	opacity:0;
	-moz-animation: imgTrans 30s infinite;
	-webkit-animation: imgTrans 30s infinite;
	animation: imgTrans 30s infinite;
}
#photo1 img {
	-moz-animation-delay: 0s;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}
#photo2 img {
	-moz-animation-delay: 6s;
	-webkit-animation-delay: 6s;
	animation-delay: 6s;
}
#photo3 img {
	-moz-animation-delay: 12s;
	-webkit-animation-delay: 12s;
	animation-delay: 12s;
}
#photo4 img{
	-moz-animation-delay: 18s;
	-webkit-animation-delay: 18s;
	animation-delay: 18s;
}
#photo5 img {
	-moz-animation-delay: 24s;
	-webkit-animation-delay: 24s;
	animation-delay: 24s;
}
#frame {
	width: 600px;
	height: 338px;
	position: relative;
	overflow: hidden;
}
@-webkit-keyframes imgTrans {
 0% { opacity:0; }
 5% { opacity:1; }
 20% { opacity:1; }
 25% { opacity:0; } 
 100% { opacity:0; }
}
@-moz-keyframes imgTrans {
 0% { opacity:0; }
 5% { opacity:1; }
 20% { opacity:1; }
 25% { opacity:0; } 
 100% { opacity:0; }
}
@keyframes imgTrans {
 0% { opacity:0; }
 5% { opacity:1; }
 20% { opacity:1; }
 25% { opacity:0; } 
 100% { opacity:0; }
}

CSSのポイント説明

・#stage,#frame,img は全て同じサイズ(写真サイズ)に設定。
・写真(img)の非透明度の初期値を0(非表示)に設定する。
・写真(img)にトータル30秒、繰り返しの animation を設定する。
・animationは、最初の5%(1.5秒)でフェイドイン(opacity0->1)、そのまま20%まで表示し、次の1.5秒でフェイドアウト(opacity1->0)し、そのまま100%まで時間待ちとする。
・各写真(スライド)のanimation間隔を6秒ずつずらして取り、写真が順次表示されるようにする。


コメント

フェイドイン・アウト型スライドショー — 84件のコメント

  1. スライドショーの作り方、参考になりました。
    ありがとうございます。
    javaScriptも使い方がわからず
    スライドショーは無理だと思っていましたが、
    CSSだけで出来て感動です。
    今から山の写真をスライドショーで作成する予定です。

    • お役に立てて幸いです。
      他にも、動きのあるものなどがありますので、参考にしてください。

      管理人 tyos

  2. お世話になります。
    こちらのソースをお借りしたいと思うのですが、サーバーにアップロードするとどうも機能しないのです。
    stage,frameの中央にphotoの左端があり、指定widthに収まっている、五枚目photoの左半分が張り付けられているという状態になります。
    width,height,時間をいじりましたがローカルでは問題なく作動するのでなにがおかしいのかわからないのです。

    アップロードはphpファイルで行っていますが、hrmlで試したところ 状況は同じでした…。
    このような事をオーナーさん聞くべきか考えたのですが、他にはない、これぞ求めているスライドショーソースなので、なんとかして使わせていただきたいです。

    • こんにちは。
      早速ですが、そのページは、Wordpress か何かのテンプレートを使っていませんか。
      このスライドショーはシンプルなものですので、通常の使い方でしたら動くはずです。
      何らかのテンプレートをお使いでしたら、cssがテンプレートのcssと干渉しあっているかもしれません。
      もしそうでしたら、stage,frame,photoなどのdiv名を違う名前にしてみてください。
      (他の制限があるかもしれないので、これで万全ではないかもしれませんが)

  3. お早い対応ありがとうございます。
    スライドショーをセットしたいページに限らず テンプレートは一切使っておりません。
    メモ帳にネットで調べたタグソースを入力し組み合わせ作っています。
    だからdiv名も全て自分で一つずつ指定していっているので被ってるということはないです。

    すいません、IEのみで確認していたため気づくのに遅れたのですが、GoogleChromeで見てみるとこちらは思惑通り形で正常に表示されていました…。
    つまりこれはIEでは非対応ということなんですかね?

    • このサンプルは、Ieに対応しています。
      ただし、古いバージョンでは確認していませんので、わかりません。

      コードはコピペしていますか?
      もし入力しているのでしたら、-webkit-などがついていないコードを見直してみてください。

  4. コードはコピー、ペーストさせていただきました。
    なかで #stage,#photo,#frameのwidth,height,を共通した任意の幅 高さに、
    imgTrans 30s,
    -moz-animation-delay: 6s;
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
    の部分の数字をトータル20の0,4,8,12,16 というように打ち変えることはしました。

  5. そうですか。
    Chromeでは正常表示されているようなのに、なぜでしょうね。
    差し支えなければ、Webページのアドレスを教えてください。

  6. アドレス私の一存では判断できないものなのですいません。
    でも、METAタグを書くということで無事IEでも表示することに成功しました!
    お騒がせしてすみませんでした。
    それではコードお借りします!ありがとうございました。

  7. このフェードイン、フェードアウトだと、iPhone及びiPadのSafariから見た時、スクロールして再度見るとスライドショーが上手く流れないんです…なぜでしょうかね

    • ごめんなさい。私は、iPhone及びiPadを持っていません。
      基本的なcodeでのanimationなので、どうしてでしょうね。
      どなたかわかる人はいませんでしょうか?

    • 早い返答ありがとうございます。
      そうですか、もう少し自分で方法を探してみます。
      iPhone、iPad、両方ともスクロールするとうまく動作していませんでした(^_^;)

  8. ブラウザの画面サイズに合わせて縮小拡大させたいと思っています。(スマホ対応の為)
    それぞれwidthを100%に指定して、#frameのheightのみ数値を指定するとそれらしき動きになりますが、指定したheightの分縮小時には空白、拡大時にはimageが切れてしまいます。(autoではだめでした)

    なにかいい方法はないでしょうか?

    #stage {
    position: relative;
    width:100%;
    margin: 0 auto;
    }
    #frame {
    width: 100%;
    height:486px;
    position: relative;
    overflow: hidden;
    }
    #photo1,#photo2,#photo3,#photo4,#photo5 {
    position: absolute;
    }
    #photo1 img,#photo2 img,#photo3 img,#photo4 img,#photo5 img {
    opacity:0;
    -moz-animation: imgTrans 10s infinite;
    -webkit-animation: imgTrans 10s infinite;
    animation: imgTrans 10s infinite;
    }
    #photo1 img {
    -moz-animation-delay: 0s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    width: 100%;
    }

    • 確かに、レスポンシブにする必要がありますね。いずれ、本稿で載せたいと思いますが、とりあえず、CODEをここに示しておきます。

      [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;
      }
      #frame {
      width: 100%;
      position: relative;
      overflow: hidden;
      }
      @-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; }
      }

      以上です。

      • HTMLは、以下です。
        &lt;div id="stage"&gt;
        &lt;div id="photo1" class="pic"&gt;&lt;img src="img2/1.jpg"&gt;&lt;/div&gt;
        &lt;div id="photo2" class="pic"&gt;&lt;img src="img2/2.jpg"&gt;&lt;/div&gt;
        &lt;div id="photo3" class="pic"&gt;&lt;img src="img2/3.jpg"&gt;&lt;/div&gt;
        &lt;div id="photo4" class="pic"&gt;&lt;img src="img2/4.jpg"&gt;&lt;/div&gt;
        &lt;div id="photo5" class="pic"&gt;&lt;img src="img2/5.jpg"&gt;&lt;/div&gt;
        &lt;/div&gt;

        • 早々の返信ありがとうございます。

          早速試してみました。

          HTMLでが抜けているのはさておき、単体では思っている動作しましたが、要素を追加すると被って表示されてしまいます。例えば上記のhtml部分を2つ並べてもぴったり重なってひとつしか表示されないようです。

        • さらに追加です。何度もすみません。
          上のCODEですと、スライドショーの下に何か記述しますと、スライドショーと重なって表示されます。position:absoluteが指定されているからです。
          そこで、スライドショーのCODEの下、記述の上に、以下のタグをはさんでください。
          &lt;div style="padding:28%;"&gt;&lt;/div&gt;
          28%は画像の縦/横比から決めた値です。

          • 素早い対応ありがとうございます。

            max-widthの600pxを画面サイズが超えない限りはいい感じです。
            状況に応じていろいろやってみます。本当に助かりました。

            • &lt;div style=”padding:28%;”&gt;&lt;/div&gt;
              を#stage内の最終行に入れてください。
              すなわち、&lt;div id="stage”&gt;・・・・&lt;/div&gt;内の最終行です。

              • すみません。読み間違えていたようです。ご指摘通りに挿入するとOKでした。ありがとうございました。

  9. はじめまして。
    cssを参考にさせていただきました。
    ありがとうございます。

    各写真に、リンクを張ったのですが、すべて同じリンクに飛んでしまいます。(photo5)
    何か原因があるのではないかと探しているのですが、今のところ見つからずどうしたものかと思っています。

    良策があればご教授いただければ幸いです。

    • 西村さんこんにちは。
      このフェイドイン・アウト型は、スライドが全部重なって配置されていますので、最後のスライドが一番上になっていて、そのリンクだけが有効になります。
      スライドイン・アウト型は重なっていませんので、このままリンクを貼ってもそれぞれのリンクに飛ばせます。

      フェイドイン・アウト型で、それぞれのリンクをアクティブにするには、アニメーションをdiv(#photo1,,,)に付与し、表示されたスライドを一番上に表示する(z-indexを大きくする)必要があります。
      すなわち、(1)HTMLで、以下のようにdiv にリンクを貼ってください。
      &lt;a href="http://tyoshioka.com/"&gt;&lt;div id="photo1" class="pic"&gt;&lt;img src="img2/1.jpg"&gt;&lt;/div&gt;&lt;/a&gt;
      (2)cssは以下のようになります。
      #stage {
      position: relative;
      width:600px;
      margin: 0 auto;
      background:#ddd;
      }
      .pic {
      position: absolute;
      opacity:0;
      -moz-animation: imgTrans 40s infinite;
      -webkit-animation: imgTrans 40s ease-in infinite;
      animation: imgTrans 40s infinite;
      }

      #photo1 {z-index:1;
      -moz-animation-delay: 0s;
      -webkit-animation-delay: 0s;
      animation-delay: 0s;
      }
      #photo2 {
      -moz-animation-delay: 8s;
      -webkit-animation-delay: 8s;
      animation-delay: 8s;
      }
      #photo3 {
      -moz-animation-delay: 16s;
      -webkit-animation-delay: 16s;
      animation-delay: 16s;
      }
      #photo4{
      -moz-animation-delay: 24s;
      -webkit-animation-delay: 24s;
      animation-delay: 24s;
      }
      #photo5 {
      -moz-animation-delay: 32s;
      -webkit-animation-delay: 32s;
      animation-delay: 32s;
      }
      @-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; }
      7% { opacity:1;}
      18% { opacity:1; }
      25% { opacity:0; }
      100% { opacity:0; }
      }

  10. 初めまして。css初心者です。
    こちらのスライドショーを参考にさせて頂いたのですが、表示してみると画像切替時に一度真っ白になり、次の画像が出てくるようになってしまいます。何か原因があるのでしょうか。
    表示はIEでもChromでも同じ現象です。
    お教え頂ければ幸いです。よろしくお願いいたします。

    • kawaseさんこんにちは。
      @keframes以下のanimationの記述で、0%から始まって、25%で終了する周期になっているのでしたら、フェイドインとアウトが重なって、真っ白になることはないと思うのですが。
      @keyframes imgTrans {
      0% { opacity:0; }
      7% { opacity:1; }
      18% { opacity:1; }
      25% { opacity:0; }
      100% { opacity:0; }
      }
      の方がスムースかもしれません。

      • ありがとうございます。
        ご指示の通りにしてみましたがやはりダメでした。
        いろいろ試したところ、@keyframes imgTrans内の25%のopacityを0→1にすると、真っ白になる事無く変化していくのですが、それだと今度は最後の画像から1枚目の画像に切り替わる時にうっすらと見えるだけですぐに2枚目の画像へ移行してしまう現象が起きます。

        • このCODEの通りでうまく遷移するはずなので、なぜ真っ白になるかは、私にはわかりませんが、25%のopacityを0→1にすると、周期がずれてしましますので、そのような現象になるのだと思います。
          25%のopacityを0にしたままで、20%の値を、21%、22%と変えてみてください。25%まで上げると、同じような結果になりますので、なるべく低い値で折り合いをつけてください。

  11. tyosbb様、はじめまして。karaと申します。cssだけでスライダー作成、大変参考になりすごく役に立ち喜んでいます。ところで、画像の一つ一つにリンクを貼ることはできますか?
    ご教授願えますでしょうか。宜しくお願い致します。

    • karaさん、はじめまして。
      上に全く同じ質問がありますが、この回答では不備がありますか?

  12. tyosbb様、お恥ずかしい!!・・上のコメント欄をよく読んでいませんでした。今から勉強させて頂きます。素早いお返事本当にありがとうございました。

  13. スライドショーが作りたくてここへたどり着きました。
    大変有益な情報をご提供頂きありがとうございます。

  14. tyosbb様、はじめまして。asapy23と申します。大変参考にさせていただいております。
    4枚スライドで編集したいのですが、調整がうまくいきません・・・お教えいただけないでしょうか。
    お手数をおかけしますがよろしくお願いいたします。

    • asapy23さん、はじめまして。
      編集のコツは、animationの記述で、25%(100/4)刻みにすることです。

      ・htmlで <div id="photo5"> 以下を消します。
      ・cssで、#photo5 img { 以下を消します。
      ・animation: imgTrans 32s infinite; の40sを32sに
      ・animation を、以下にします。
      @keyframes imgTrans {
      0% { opacity:0; }
      7% { opacity:1; }
      25% { opacity:1; }
      32% { opacity:0; }
      100% { opacity:0; }
      }
      数値は、必要なら、気に入るように調整してください。
      以上ご検討ください。

  15. tyosbb様、早速ご回答いただきありがとうございます。
    5枚目写真を削除して編集したのですが画面で確認したところ4枚目が終わったあと、最初の画像に戻らず、白い画像があり最初の画像に戻ります。
    以下のようにcssを記述しています。(画像サイズ変更しています)
    どこがおかしいかおわかりでしょうか。ご面倒をおかけして申し訳ありません。
    また教えていただければ幸いです。

    stage {
    position: relative;
    width: 770px;
    height:260px;
    margin: 0 auto;
    }
    #photo1,#photo2,#photo3,#photo4 {
    position: absolute;
    width: 770px;
    height: 260px;
    }
    #photo1 img,#photo2 img,#photo3 img,#photo4 img{
    opacity:0;
    -moz-animation: imgTrans 32s infinite;
    -webkit-animation: imgTrans 32s infinite;
    animation: imgTrans 32s infinite;
    }
    #photo1 img {
    -moz-animation-delay: 0s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    }
    #photo2 img {
    -moz-animation-delay: 6s;
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
    }
    #photo3 img {
    -moz-animation-delay: 12s;
    -webkit-animation-delay: 12s;
    animation-delay: 12s;
    }
    #photo4 img{
    -moz-animation-delay: 18s;
    -webkit-animation-delay: 18s;
    animation-delay: 18s;
    }

    #frame {
    width: 770px;
    height: 260px;
    position: relative;
    overflow: hidden;
    }
    @-webkit-keyframes imgTrans {
    0% { opacity:0; }
    7% { opacity:1; }
    25% { opacity:1; }
    32% { opacity:0; }
    100% { opacity:0; }
    }
    @-moz-keyframes imgTrans {
    0% { opacity:0; }
    7% { opacity:1; }
    25% { opacity:1; }
    32% { opacity:0; }
    100% { opacity:0; }
    }
    @keyframes imgTrans {
    0% { opacity:0; }
    7% { opacity:1; }
    25% { opacity:1; }
    32% { opacity:0; }
    100% { opacity:0; }
    }

  16. とてもわかりやすく参考にさせていただきます。

    スライドショーがやっと作成できました!!
    ありがとうございました。

  17. もうしわけありません、印刷プレビューでみようとしたところ
    画像が印刷できなくなっております。
    できれば印刷できるようにしてほしいのですが・・・。

    • ギャラリーの場合は静止画なので、画像のプレビューができますが、スライドショーは、スクリプトで動いていますので、出来ないようですね。私にも、印刷できるようにする方法はわかりません。
      どのような目的で印刷しようとしているかわかりませんが、画像が必要なのでしょうか。画面キャプチャ―は可能ですけど、代替できませんか。

  18. 勉強させて頂いています!ありがとうございます!
    今回こちらを参考にさせて頂いているのですが、アニメーションを繰り返し設定ではなく1度きりにした場合(infiniteを1にしました)、動作はきちんとするのですが画像部分が真っ白で終わってしまいます…。透過されたままだと予想したのですが、最終画像を表示したまま終わらせるにはどうしたらいいのでしょうか?;;
    もし良かったらご教授いただけると助かります!
    宜しくお願いします。

    • こんにちは。
      animation の次の行に、
      animation-fill-mode: forwards;
      を加えてください。
      animationが終了したときの状態をforwords(進んだ状態)にします。

  19. tyosbb様はじめまして。
    初心者ですので、cssでのスライドショーとても助かっております。
    ここで聞いてよいのかわかりませんでしたが、スライドショーの上にプルタブ式のメニューを付けるとタブが下に回り込んでしまいます。
    まだまだ勉強不足でいけないのですが、z-indexを使っても回り込んでしまうので、お助けを・・・と思い質問させていただきました。

    • こんにちは。
      どのようなドロップダウンメニューかわかりませんが、例えば、DremweaverのBootstrapコンポのdropdown menu ですと、もぐりこみはないようですし、#stageのz-indexにも反応します。
      すなわち、#stageのz-indexを例えば、-1000にした場合どうですか?

      • なんどかコメントするのですが、文字数が多いのかはいりませんでした。
        教えていただいたようにやったのですが、うまくいきませんでした…

        もう少し頑張ってみます。

          • ありがとうございます。
            できませんでしたので、もう一度よく勉強してみます。
            ご迷惑おかけしました(涙)

            • 残念ですね。
              私のPCで貴サイトを再現すると、潜り込みはありません。
              お使いのjavascriptが原因かもしれません。

  20. 初めまして、Tyosbb様
    html,cssを約2年前に50歳になって勉強しだしまして、
    数日前に、貴殿のこのサイトにたどり着きました。
    もっと早くにたどり着いていればと・・・

    おかげさまで、スライドショーを組み込むことができましたが、
    写真サイズ900×675を1分の20枚で動かしてみると、
    最初は1枚目から20枚目まで割りとスムーズに動作いたします。

    最後の20枚目で動きが数秒とまり、次の開始が4枚目から始まるような
    状態です。

    写真サイズが、大きいのでしょうか?
    解消方法がありましたら、ご教示いただきたく
    コメントいたしました。

    よろしくお願いいたします。

    • 乙ちゃん、はじめまして。
      50歳からの勉強は大変だと思いますが、まだまだ若いとも言えます。頑張ってください。

      スムーズに作動しないのは、写真サイズとは関係ありません。
      animationの設定にあると思います。
      20枚ですから、切り替えが6秒間隔でしたら、トータル120sとなります。
      animationは、例えば、
      @keyframes imgTrans {
      0% { opacity:0; z-index:100; }
      1.75% { opacity:1; z-index:100;}
      4.5% { opacity:1; z-index:100; }
      6.25% { opacity:0; }
      100% { opacity:0; }
      }
      となり、delay間隔は6sとなります。
      以上でうまくいくはずです。

      • 切替間隔は、全体の閲覧が1分で終わるように
        3sで設定しています。
        悪しからず御了承お願いいたします。

        • それでは、トータルを60sにして、delayを3s間隔にしてください。
          animationはそのままでいいです。

          • ご返答ありがとうございます。
            いま、確認できる環境にありませんので、
            明日、見直してみます。

          • お世話になります。
            cssの記述を確認してみましたが、
            特に「?」と思われる箇所は、見当たりませんでした。
            ブラウザ表示を見ながら、時間をはかってみました。
            最初は、60sで20枚まで表示されます。
            20枚目で、しばらくスライドが止まり
            約10秒後に、4枚目から表示されます。
            60秒という時間は、キッチリ刻んでいるようです。
            リロードすると、1枚目から表示され
            上記を繰り返すような状態です。

  21. 乙ちゃんへ

    .pic img のanimation: imgTrans 60s infinite;となっていて、
    photo20のanimation delayが57sになっていますか?

    なっていなかったら、delayの設定を見直してください。

    @keyframes imgTrans { 以下も私が示した記述になっていますか?

    • @keyframes imgTransの
      %をご指示のとおりに記述しましたら
      20枚がキチンと表示できました。
      ありがとうございました。
      ただ、勉強不足で、理屈が分かっていませんので
      プリントアウトして、ゆっくり勉強します。

      • 解決おめでとうございます。
        20枚ですから、100%のうち5%で切り換えれば20枚送ったところでもとにもどります。5%の前後でフェイド効果を出しています。
        御検討ください。

        • 写真が5枚の場合
          @keyframes imgTrans {
          0% { opacity:0; }
          5% { opacity:1; }
          20% { opacity:1; }
          25% { opacity:0; }
          100% { opacity:0; }
          で、100/5=20% は理解できます。
          その前後の5%,25%という数値は適宜という
          解釈でよろしいのでしょうか。

          このコメント自体、的外れであったら申し訳ありません。

          • 5-20%の間表示され、0-5%でFadeIn、20-25%でFadeOutされます。
            5,20%は、適宜に、適した数値を設定します。

          • 私も同じような現象がおきて困っていました。

            14枚の画像を5秒ずつ表示させていますが
            14枚目が1?秒くらい表示され、ループした時の1枚目が表示されず2枚目が数秒表示されていました。

            上記を参考に
            @keyframes imgTrans {
            0% { opacity:0; z-index:100; }
            1.75% { opacity:1; z-index:100;}
            4.5% { opacity:1; z-index:100; }
            6.25% { opacity:0; }
            100% { opacity:0; }
            }
            としてみたら、フェードイン・フェードアウトが前後の画像が重なった状態ではなくなりました。
            それぞれの画像の開始前後1秒程度画像のない(背景色が見える)状態になります。

            .pic img のanimation: imgTrans 65s infinite;となっていて、
            photo14のanimation delayが60sです。

            ご回答頂けると幸いです。よろしくお願いします。

  22. nicoさん。

    animationとトータル秒数,delayの設定を見直してください。
    14枚ですから、100/14ですから7.1%切換えになります。
    65sではなく、14*5=70sとなり、photo14のdelayは65sとなります。

    • ご返信ありがとうございます。

      >14*5=70sとなり、photo14のdelayは65s

      すみません、記述ミスでアップしてるものはその設定でした。

      @keyframes imgTrans {
      0% { opacity:0; z-index:100; }
      1.75% { opacity:1; z-index:100;}
      4.5% { opacity:1; z-index:100; }
      7.1% { opacity:0; }
      100% { opacity:0; }
      }

      とすればよろしいのでしょうか?

      • すみません、解決しました!
        申し訳ございませんが、上記アドレスをもし消せるのでしたら
        消していただけると幸いです。
        よろしくお願いします。

        • 解決しましたか。
          @keyframes imgTrans { で、4.5%とあるところを、7%前後にして、そのあとFadeOutさせればいいと思います。
          url消去しました。

          • アドレス消去、ありがとうございました。

            5秒15枚で
            上から0%、2%、6.7%、8.7%、100%でうまくいきました!

  23. 初めましてご教授頂きたく
    あちこち探し続け続けてこちらがヒット
    出来ました どうかご教授頂けますよに
    スライド画像に下側にページングがブラウザに
    表示されてしまって 非表示出来るタグに
    なかなかひっからず困っています
    どうか ご教授いただけますようによろしくお願いいたします

    • はじめまして。

      >スライド画像に下側にページングがブラウザに表示されてしまって
      とありますが、ページングってなんですか?
      スライド以外に表示させるhtmlはないはずですが。

      • tyosbb 様

        ありがとうございます
        私の勘違いでこちらにご教授お願いしたみたいです;;
        はい スライド画像です もしよければご教授

        頂ければと思います 背景の上に画像自動スライド
        右から左に向かってスライド
        するタグ探しています どうかよろしくお願いします

        • まだ、ご趣旨が良くつかめていませんが、
          本サイト、スライドショーの、「スライドイン・アウト型」のことではありませんか。
          固定した背景画像が必要なら、#stageに、画像を表示しておけばいいと思いますが。

  24. tyosbb 様
    申し訳ありません私のお願いする

    趣旨説明不足ご迷惑おかけしています説明がうまくできなくて
    本当にごめんなさい無知脳立ち上げるhpですあちこちのサイトに
    お邪魔しながらタグお借りして立ち上げたホームで
    未完成ですがこちらのurl <a href="http://egretsagi.fc2web.com/isa9.html" rel="nofollow ugc">http://egretsagi.fc2web.com/isa9.html</a>

    です中心の画像の下にページングをブラウザに反映されてしまって困っています 非表示方法があればご教授頂ければと思いますどうかよろしくお願いいたします

    • javascriptのsliderを使っているようですね。
      この、jxsliderの仕様ですので、javascriptの設定で非表示にすることができるかもしれません。

      このサイトは、javascriptを使わないで、cssだけでsliderなどのanimationを動かそうとしていますので、javascriptの内部までのフォローは出来かねますので、ご了承ください。

    • tyosbb 様

      ありがとうございます
      あ”アニメーション全く関係ないです
      設置する画像は固定の物です
      適当に付けた画像です
      ごめんなさい ややこしいことして
      ご教授お願いしてしまって申し訳ありません
      ページングをブラウザに反映が非表示出来ればと思いまして
      本当に申し訳ありません お力頂ければとおもいます
      よろしくお願いいたします

  25. はじめまして。らいだーと申します。
    CSSの勉強を始めまして、このページに行きつきました。とても勉強になって助かっています!
    ぜひ、アドバイスを頂きたい事項がございます。

    1枚の表示時間6秒、合計11枚のスライドショーを作成しています。
    下のCSSを組んでいるのですが、11枚目が壁紙のように表示エリアに鎮座し、その上を1枚目~10枚目がスライドしていくという現象が起きてしまって困っています。
    1枚の表示時間6秒、合計10枚のスライドショーでは問題が発生せず、全画像スライドショーを実現できているのですが、11枚になるととたんに壁紙現象が起きてしまいます。

    アドバイスを頂けると幸いです。
    よろしくお願いいたします。

    #stage {
    position: relative;
    width: 960px;
    height:640px;
    margin: 0 auto;
    }
    #photo1,#photo2,#photo3,#photo4,#photo5,#photo6,#photo7,#photo8,#photo9,#photo10,#photo11 {
    position: absolute;
    width: 960px;
    height: 640px;
    }
    #photo1 img,#photo2 img,#photo3 img,#photo4 img,#photo5 img,#photo6 img,#photo7 img,#photo8 img,#photo9 img,#photo10 img,#photo11 img {
    opacity:0;
    -moz-animation: imgTrans 66s infinite;
    -webkit-animation: imgTrans 66s infinite;
    animation: imgTrans 66s infinite;
    pointer-events: none;
    }
    #photo1 img {
    -moz-animation-delay: 0s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    }
    #photo2 img {
    -moz-animation-delay: 6s;
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
    }
    #photo3 img {
    -moz-animation-delay: 12s;
    -webkit-animation-delay: 12s;
    animation-delay: 12s;
    }
    #photo4 img{
    -moz-animation-delay: 18s;
    -webkit-animation-delay: 18s;
    animation-delay: 18s;
    }
    #photo5 img {
    -moz-animation-delay: 24s;
    -webkit-animation-delay: 24s;
    animation-delay: 24s;
    }
    #photo6 img {
    -moz-animation-delay: 30s;
    -webkit-animation-delay: 30s;
    animation-delay: 30s;
    }
    #photo7 img {
    -moz-animation-delay: 36s;
    -webkit-animation-delay: 36s;
    animation-delay: 36s;
    }
    #photo8 img {
    -moz-animation-delay: 42s;
    -webkit-animation-delay: 42s;
    animation-delay: 42s;
    }
    #photo9 img {
    -moz-animation-delay: 48s;
    -webkit-animation-delay: 48s;
    animation-delay: 48s;
    }
    #photo10 img {
    -moz-animation-delay: 54s;
    -webkit-animation-delay: 54s;
    animation-delay: 54s;
    }
    #photo11 img {
    -moz-animation-delay: 60s;
    -webkit-animation-delay: 60s;
    animation-delay: 60s;
    }
    #frame {
    width: 960px;
    height: 640px;
    position: relative;
    overflow: hidden;
    }
    @-webkit-keyframes imgTrans {
    0% { opacity:0; z-index:100; }
    2.3% { opacity:1; z-index:100; }
    9.1% { opacity:1; z-index:100; }
    11.4% { opacity:0; }
    100% { opacity:0; }
    }
    @-moz-keyframes imgTrans {
    0% { opacity:0; z-index:100; }
    2.3% { opacity:1; z-index:100; }
    9.1% { opacity:1; z-index:100; }
    11.4% { opacity:0; }
    100% { opacity:0; }
    }
    @keyframes imgTrans {
    0% { opacity:0; z-index:100; }
    2.3% { opacity:1; z-index:100; }
    9.1% { opacity:1; z-index:100; }
    11.4% { opacity:0; }
    100% { opacity:0; }
    }

    • ライダーさん、はじめまして。
      私がライダーさんのcssに、htmlを書き加えて試してみたところ、全く問題なくスライドショーが展開します。記述を見ても問題ありません。
      11枚目が消えない(opacity:0 にならない)ということなのでしょうが、css記述を見る限り、そのようなことが起きるとは思えません。どうしてでしょう?

      • tyosbb様
        返信ありがとうございます。
        テストもありがとうございます。
        自分ではどうにも原因がわからず、コメントさせていただきました。
        もう一度、HTML、CSSを見直してみます。
        11枚の時だけ起きるのか、12枚にしたらどうなるのかも併せて試してみて、原因を探ってみるようにします。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です