スライダー（FadeIN・Out 型）

投稿日: 作成者:
スライドショーが進行する途中で、マウスオーバーで表示される送りボタン（＜（左）　＞（右））のクリックで、スライドをその方向に進行させるとともに、スライドショーの方向もクリックした方向に切り替えるタイプのスライダーである。今回の投稿は、スライド切替時のエフェクトをフェイドイン・アウトとしている。

サンプル


表示用ＨＴＭＬ

<div id="stage">
  <div id="frame">
    <input type="radio" id="back1" name="gal">
    <input type="radio" id="back2" name="gal">
    <input type="radio" id="back3" name="gal">
    <input type="radio" id="back4" name="gal">
    <input type="radio" id="back5" name="gal">
    <input type="radio" id="next1" name="gal">
    <input type="radio" id="next2" name="gal">
    <input type="radio" id="next3" name="gal">
    <input type="radio" id="next4" name="gal">
    <input type="radio" id="next5" name="gal">
  <div id="photos">
      <div id="photo1" class="pic"><img src="img2/1.jpg">
	    <label for="back1"><div id="left1" class="b_left"><span>＜</span></div></label> 
	    <label for="next1"><div id="right1" class="b_right"><span>＞</span></div></label>
      </div>
      <div id="photo2" class="pic"><img src="img2/2.jpg">
	    <label for="back2"><div id="left2" class="b_left"><span>＜</span></div></label>
    	<label for="next2"><div id="right2" class="b_right"><span>＞</span></div></label>
      </div>
      <div id="photo3" class="pic"><img src="img2/3.jpg">
	    <label for="back3"><div id="left3" class="b_left"><span>＜</span></div></label>
    	<label for="next3"><div id="right3" class="b_right"><span>＞</span></div></label>        
      </div>
      <div id="photo4" class="pic"><img src="img2/4.jpg">
    	<label for="back4"><div id="left4" class="b_left"><span>＜</span></div></label>
    	<label for="next4"><div id="right4" class="b_right"><span>＞</span></div></label>
      </div>
      <div id="photo5" class="pic"><img src="img2/5.jpg">
    	<label for="back5"><div id="left5" class="b_left"><span>＜</span></div></label>
    	<label for="next5"><div id="right5" class="b_right"><span>＞</span></div></label>
      </div>
    </div>
  </div>
</div>

HTMLの概要説明

・htmlは「左右スライド移動型」とまったく同じである。

表示用CSS

/* 表示画面 */
#stage {
	position: relative;
	width: 600px;
	height:338;
	margin: 0 auto;
}
/* 表示枠 */
#frame {
	width: 600px;
	height: 338px;
	position: relative;
	overflow: hidden;
}
/*全ての写真を水平一列に格納したdiv、#photosに,
スライドショーの基本の animation を設定*/
#photos {
	position:absolute;
	top:0;
	-webkit-animation: imgPassToLeft0 30s infinite;
	animation: imgPassToLeft0 30s infinite;
}
/*各写真の並び位置を設定*/
.rec {
	float:left;
	position:relative;
}
/* 全てのラジオボタンを非表示に */
#back1,#back2,#back3,#back4,#back5,#next1,#next2,#next3,#next4,#next5{
	display: none;
}
/*送りボタン文字（＜、＞）の設定*/
.b_left span, .b_right span {
	position: absolute;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 40px;
	font-weight: bold;
	opacity:0;
	top: 140px;
	color:#EEE;
}
.b_left span {
	left: 10px;
}
.b_right span {
	left: 560px;
}
/*ボタン文字hover時の設定*/
.pic:hover > label div span {
	opacity:1;
	color:#EEE;
}
.pic label div span:hover {
	color:#f00;
	cursor:pointer;
}
/* 各送りボタンクリック時のanimation設定 */
#next1:checked ~ #photos {
	animation: imgPassToLeft1 30s infinite;	
	animation-delay: -4.8s;
	-webkit-animation: imgPassToLeft1 30s infinite;	
	-webkit-animation-delay: -4.8s;
}
#next2:checked ~ #photos {
	animation: imgPassToLeft2 30s infinite;
	animation-delay: -10.8s;
	-webkit-animation: imgPassToLeft2 30s infinite;
	-webkit-animation-delay: -10.8s;
}
#next3:checked ~ #photos {
	animation: imgPassToLeft3 30s infinite;
	animation-delay: -16.8s;
	-webkit-animation: imgPassToLeft3 30s infinite;
	-webkit-animation-delay: -16.8s;
}
#next4:checked ~ #photos {
	animation: imgPassToLeft4 30s infinite;
	animation-delay: -22.8s;
	-webkit-animation: imgPassToLeft4 30s infinite;
	-webkit-animation-delay: -22.8s;
}
#next5:checked ~ #photos {
	animation: imgPassToLeft5 30s infinite;
	animation-delay: -28.8s;
	-webkit-animation: imgPassToLeft5 30s infinite;
	-webkit-animation-delay: -28.8s;
}
#back1:checked ~ #photos {
	animation: imgPassToRight1 30s infinite;
	animation-delay: -28.8s;
	-webkit-animation: imgPassToRight1 30s infinite;
	-webkit-animation-delay: -28.8s;
}
#back2:checked ~ #photos {
	animation: imgPassToRight2 30s infinite;
	animation-delay: -22.8s;
	-webkit-animation: imgPassToRight2 30s infinite;
	-webkit-animation-delay: -22.8s;
}
#back3:checked ~ #photos {
	animation: imgPassToRight3 30s infinite;
	animation-delay: -16.8s;
	-webkit-animation: imgPassToRight3 30s infinite;
	-webkit-animation-delay: -16.8s;
}
#back4:checked ~ #photos {
	animation: imgPassToRight4 30s infinite;
	animation-delay: -10.8s;
	-webkit-animation: imgPassToRight4 30s infinite;
	-webkit-animation-delay: -10.8s;
}
#back5:checked ~ #photos {
	animation: imgPassToRight5 30s infinite;
	animation-delay: -4.8s;
	-webkit-animation: imgPassToRight5 30s infinite;
	-webkit-animation-delay: -4.8s;
}
/* animation設定 */
@keyframes imgPassToLeft0 {
	0%  {   left:   0%;opacity:0;}
	4%  {   left:   0%;opacity:1;}
	16% {   left:   0%;opacity:1;}
	19.99%{ left:   0%;opacity:0;}
	20% {   left:-100%;opacity:0;}
	24% {   left:-100%;opacity:1;} 
	36% {   left:-100%;opacity:1;}
	39.99%{ left:-100%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-300%;opacity:0;}
	64% {   left:-300%;opacity:1;}
	76% {   left:-300%;opacity:1;} 
	79.99%{ left:-300%;opacity:0;}
	80% {   left:-400%;opacity:0;}
	84% {   left:-400%;opacity:1;}
	96% {   left:-400%;opacity:1;}
	99.99%{ left:-400%;opacity:0;}
	100% {  left:   0%;opacity:0;}
}
@keyframes imgPassToLeft1 {
	0%  {   left:   0%;opacity:0;}
	4%  {   left:   0%;opacity:1;}
	16% {   left:   0%;opacity:1;}
	19.99%{ left:   0%;opacity:0;}
	20% {   left:-100%;opacity:0;}
	24% {   left:-100%;opacity:1;} 
	36% {   left:-100%;opacity:1;}
	39.99%{ left:-100%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-300%;opacity:0;}
	64% {   left:-300%;opacity:1;}
	76% {   left:-300%;opacity:1;} 
	79.99%{ left:-300%;opacity:0;}
	80% {   left:-400%;opacity:0;}
	84% {   left:-400%;opacity:1;}
	96% {   left:-400%;opacity:1;}
	99.99%{ left:-400%;opacity:0;}
	100% {  left:   0%;opacity:0;}
}
@keyframes imgPassToLeft2 {
	0%  {   left:   0%;opacity:0;}
	4%  {   left:   0%;opacity:1;}
	16% {   left:   0%;opacity:1;}
	19.99%{ left:   0%;opacity:0;}
	20% {   left:-100%;opacity:0;}
	24% {   left:-100%;opacity:1;} 
	36% {   left:-100%;opacity:1;}
	39.99%{ left:-100%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-300%;opacity:0;}
	64% {   left:-300%;opacity:1;}
	76% {   left:-300%;opacity:1;} 
	79.99%{ left:-300%;opacity:0;}
	80% {   left:-400%;opacity:0;}
	84% {   left:-400%;opacity:1;}
	96% {   left:-400%;opacity:1;}
	99.99%{ left:-400%;opacity:0;}
	100% {  left:   0%;opacity:0;}
}
@keyframes imgPassToLeft3 {
	0%  {   left:   0%;opacity:0;}
	4%  {   left:   0%;opacity:1;}
	16% {   left:   0%;opacity:1;}
	19.99%{ left:   0%;opacity:0;}
	20% {   left:-100%;opacity:0;}
	24% {   left:-100%;opacity:1;} 
	36% {   left:-100%;opacity:1;}
	39.99%{ left:-100%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-300%;opacity:0;}
	64% {   left:-300%;opacity:1;}
	76% {   left:-300%;opacity:1;} 
	79.99%{ left:-300%;opacity:0;}
	80% {   left:-400%;opacity:0;}
	84% {   left:-400%;opacity:1;}
	96% {   left:-400%;opacity:1;}
	99.99%{ left:-400%;opacity:0;}
	100% {  left:   0%;opacity:0;}
}
@keyframes imgPassToLeft4 {
	0%  {   left:   0%;opacity:0;}
	4%  {   left:   0%;opacity:1;}
	16% {   left:   0%;opacity:1;}
	19.99%{ left:   0%;opacity:0;}
	20% {   left:-100%;opacity:0;}
	24% {   left:-100%;opacity:1;} 
	36% {   left:-100%;opacity:1;}
	39.99%{ left:-100%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-300%;opacity:0;}
	64% {   left:-300%;opacity:1;}
	76% {   left:-300%;opacity:1;} 
	79.99%{ left:-300%;opacity:0;}
	80% {   left:-400%;opacity:0;}
	84% {   left:-400%;opacity:1;}
	96% {   left:-400%;opacity:1;}
	99.99%{ left:-400%;opacity:0;}
	100% {  left:   0%;opacity:0;}
}
@keyframes imgPassToLeft5 {
	0%  {   left:   0%;opacity:0;}
	4%  {   left:   0%;opacity:1;}
	16% {   left:   0%;opacity:1;}
	19.99%{ left:   0%;opacity:0;}
	20% {   left:-100%;opacity:0;}
	24% {   left:-100%;opacity:1;} 
	36% {   left:-100%;opacity:1;}
	39.99%{ left:-100%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-300%;opacity:0;}
	64% {   left:-300%;opacity:1;}
	76% {   left:-300%;opacity:1;} 
	79.99%{ left:-300%;opacity:0;}
	80% {   left:-400%;opacity:0;}
	84% {   left:-400%;opacity:1;}
	96% {   left:-400%;opacity:1;}
	99.99%{ left:-400%;opacity:0;}
	100% {  left:   0%;opacity:0;}
}
@keyframes imgPassToRight1 {
	0%  {   left:-400%;opacity:0;}
	4%  {   left:-400%;opacity:1;}
	16% {   left:-400%;opacity:1;}
	19.99%{ left:-400%;opacity:0;}
	20% {   left:-300%;opacity:0;}
	24% {   left:-300%;opacity:1;} 
	36% {   left:-300%;opacity:1;}
	39.99%{ left:-300%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-100%;opacity:0;}
	64% {   left:-100%;opacity:1;}
	76% {   left:-100%;opacity:1;} 
	79.99%{ left:-100%;opacity:0;}
	80% {   left:   0%;opacity:0;}
	84% {   left:   0%;opacity:1;}
	96% {   left:   0%;opacity:1;}
	99.99%{ left:   0%;opacity:0;}
	100% {  left:-400%;opacity:0;}
}
@keyframes imgPassToRight2 {
	0%  {   left:-400%;opacity:0;}
	4%  {   left:-400%;opacity:1;}
	16% {   left:-400%;opacity:1;}
	19.99%{ left:-400%;opacity:0;}
	20% {   left:-300%;opacity:0;}
	24% {   left:-300%;opacity:1;} 
	36% {   left:-300%;opacity:1;}
	39.99%{ left:-300%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-100%;opacity:0;}
	64% {   left:-100%;opacity:1;}
	76% {   left:-100%;opacity:1;} 
	79.99%{ left:-100%;opacity:0;}
	80% {   left:   0%;opacity:0;}
	84% {   left:   0%;opacity:1;}
	96% {   left:   0%;opacity:1;}
	99.99%{ left:   0%;opacity:0;}
	100% {  left:-400%;opacity:0;}
}
@keyframes imgPassToRight3 {
	0%  {   left:-400%;opacity:0;}
	4%  {   left:-400%;opacity:1;}
	16% {   left:-400%;opacity:1;}
	19.99%{ left:-400%;opacity:0;}
	20% {   left:-300%;opacity:0;}
	24% {   left:-300%;opacity:1;} 
	36% {   left:-300%;opacity:1;}
	39.99%{ left:-300%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-100%;opacity:0;}
	64% {   left:-100%;opacity:1;}
	76% {   left:-100%;opacity:1;} 
	79.99%{ left:-100%;opacity:0;}
	80% {   left:   0%;opacity:0;}
	84% {   left:   0%;opacity:1;}
	96% {   left:   0%;opacity:1;}
	99.99%{ left:   0%;opacity:0;}
	100% {  left:-400%;opacity:0;}
}
@keyframes imgPassToRight4 {
	0%  {   left:-400%;opacity:0;}
	4%  {   left:-400%;opacity:1;}
	16% {   left:-400%;opacity:1;}
	19.99%{ left:-400%;opacity:0;}
	20% {   left:-300%;opacity:0;}
	24% {   left:-300%;opacity:1;} 
	36% {   left:-300%;opacity:1;}
	39.99%{ left:-300%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-100%;opacity:0;}
	64% {   left:-100%;opacity:1;}
	76% {   left:-100%;opacity:1;} 
	79.99%{ left:-100%;opacity:0;}
	80% {   left:   0%;opacity:0;}
	84% {   left:   0%;opacity:1;}
	96% {   left:   0%;opacity:1;}
	99.99%{ left:   0%;opacity:0;}
	100% {  left:-400%;opacity:0;}
}
@keyframes imgPassToRight5 {
	0%  {   left:-400%;opacity:0;}
	4%  {   left:-400%;opacity:1;}
	16% {   left:-400%;opacity:1;}
	19.99%{ left:-400%;opacity:0;}
	20% {   left:-300%;opacity:0;}
	24% {   left:-300%;opacity:1;} 
	36% {   left:-300%;opacity:1;}
	39.99%{ left:-300%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-100%;opacity:0;}
	64% {   left:-100%;opacity:1;}
	76% {   left:-100%;opacity:1;} 
	79.99%{ left:-100%;opacity:0;}
	80% {   left:   0%;opacity:0;}
	84% {   left:   0%;opacity:1;}
	96% {   left:   0%;opacity:1;}
	99.99%{ left:   0%;opacity:0;}
	100% {  left:-400%;opacity:0;}
}

CSSのポイント説明

・CSSも「左右スライド移動型」とほぼ同じであるが、animation の内容が、スライドの移動（瞬間移動）とフェイドイン・アウトの記述が混在している。
・この稿も、chrome用の@frame以下の記述が省略されているので、ベンダープレフィックス(-webkit-)をつけた記述を加える必要がある。
・ちょっと記述が長くなるので、外部cssファイルにして、それにリンクさせる使い方が、他のスクリプトのclassファイル的な使い方でいいのではないかと。

コメント

スライダー（FadeIN・Out 型） — 18件のコメント

  1. 参考にしていただいています。ありがとうございます。
    勉強さになります。
    レスポンシブルで作っれたらいいのになーと思います。
    お時間がありましたらよろしくおねがいします。

    返信 ↓

  2. 望月さん

    　参考にしていただきありがとうございます。
    　このSAMPLEでは、サイズ固定で制御していますので、レスポンシブルにはなりませんね。
    　今後の課題とさせてください。

    返信 ↓

  3. 参考にさせて頂いています。
    このスライドショーがとても気に入りました。
    是非私のホームページのトップにあるスライドショーで使わせて頂きたいと思っています。

    そこで、少しお伺いしたい事がございます。
    今回、私のスライドショーで使おうと思っている画像が主に「ショップの紹介」であったり、「商品画像」だったりします。

    今、使ってらっしゃる画像は「山の風景画像」なので現在の仕様でとてもしっくりくるのですが、商品画像などの場合は「画面が完全に【白く】なってから次の画像」ではなく「画面が完全に【黒く】になってから次の画像」の方が合うのではないかと考えています。

    ですので、可能出れば次の画像に移る時にブラックアウトするように変更したいのですが、どのようにすれば良いかご助言頂けませんでしょうか？(^_^;)よろしくお願い致します。

    返信 ↓

    • 山直さん、参考になれば幸いです。

      さて、バックを黒にするには、CSSの記述で、
      #stage { } 内に以下の記述を加えてください。

      background:#000;

      これでブラックアウトするようになります。

      返信 ↓

  4. はじめまして！ホームページ作り初心者の者です。
    ド素人の私にとってcssだけでつくるスライドショーが魔法のように見えます！笑
    素晴らしい素材をありがとうございます！

    fc2ネットショップで使わせていただきたいのですが、
    なかなか作動せず困っています・・・。
    左右写真送り型スライダーとフェイドイン・アウト型のスライドショーは動いたのですが・・・。
    画像のサイズだけ980px　450pxに変えさせていただいてます！

    よろしくおねがいします！

    返信 ↓

    • かおりさん、こんにちは。
      御社の在るあたりは、昔いろいろ探しながら歩き回った辺りで、懐かしいです。
      さて、送り形のスライダーが動いたのなら、こちらも動くはずですが、どのような状態なのでしょうか。
      写真のサイズを変えた場合には、それに応じて、#stage,#frameの、width,height を変えなければなりませんが、変えていますよね。

      返信 ↓

  5. ご返信ありがとうございます！
    #stage,#frameの、width,height を変えて、画像のURLを変えただけなのですが、何が問題かさっぱりです・・＞＜

    返信 ↓

    • どのような状態ですか。それがわからなければ、何が問題かこちらにもわかりません。
      もし、ブラウザにChromeを使っているのでしたら、ベンダープレフィックス(-webkit-)をつけた記述を加える必要がありますが、されていますよね。

      返信 ↓

      • かおりさん
        続きのコメントがスライド移動型の方に入っていましたので、そちらで答えています。スライド移動型の方を見てください。

        返信 ↓

  6. ホームページ作成初心者です。スライダー（FadeIN・Out 型）の記事について参考にさせて頂いております。どうもありがとうございます。

    画像が３枚スライドするようなページを作成している途中なのですが、左送りボタン＜を押しても画像が順番通りに表示されません。右送りボタン＞と、アニメーションはうまく機能していると思います。しばらく取り組んでいるのですが自力で改善できません…。どんなことが原因だと考えられますか？
    お教え頂ければ幸いです。

    返信 ↓

    • スギヤマさん、はじめまして。
      スライドを3枚にするには、トータルのanimation時間を、30sから18sに代えたり、animationの切換え刻みを、20％から33％に代えたりしなければなりませんが、その辺がきちんとできているでしょうか。
      また、animation-delay の値が、-16.8sまでとなります。
      以上ご検討ください。

      返信 ↓

      • はじめまして。＾＾ご回答ありがとうございます。大変助かります。
        トータルのanimation時間を18sに変えたり、animation-delay の値を-16.8sまでにする作業は行いました。私が作ったアニメーションの切り替え刻みを見ていただけませんか？
        お手数おかけし、すみません。

        /* animation設定 */（抜粋）
        @keyframes imgPassToLeft0 {
        0% { left: 0%;opacity:0;}
        11.11% { left: 0%;opacity:1;}
        22.22% { left: 0%;opacity:1;}
        33.33%{ left: 0%;opacity:0;}
        34% { left:-100%;opacity:0;}
        44.44% { left:-100%;opacity:1;}
        55.55% { left:-100%;opacity:1;}
        66.66%{ left:-100%;opacity:0;}
        67% { left:-200%;opacity:0;}
        77.77% { left:-200%;opacity:1;}
        88.88% { left:-200%;opacity:1;}
        99.99%{ left:-200%;opacity:0;}
        100% { left: 0%;opacity:0;}

        返信 ↓

        • 上記css、コピーミスだと思いますが、最後に}を付ければOKです。
          逆方向のcssを以下の様にすれば、正常に動くはずです。
          @keyframes imgPassToRight1 {
          0% { left: -200%;opacity:0;}
          11.11% { left: -200%;opacity:1;}
          22.22% { left: -200%;opacity:1;}
          33.33%{ left: -100%;opacity:0;}
          34% { left:-100%;opacity:0;}
          44.44% { left:-100%;opacity:1;}
          55.55% { left:-100%;opacity:1;}
          66.66%{ left:-100%;opacity:0;}
          67% { left:-0%;opacity:0;}
          77.77% { left:-0%;opacity:1;}
          88.88% { left:-0%;opacity:1;}
          99.99%{ left:-0%;opacity:0;}
          100% { left: -200%;opacity:0;}
          }
          ご検討ください。

          返信 ↓

コメントを残す

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