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

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秒ずつずらして取り、写真が順次表示されるようにする。


コメント

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

  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にした場合どうですか?

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

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

          • style.cssの、div#headerArea { 内に、
            z-index:100;
            を挿入してみたら、いかがですか。

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

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

MIYAZAKI にコメントする コメントをキャンセル

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>