フェイドイン・アウト型スライドショー(テロップ入り)

先に記述したフェイドイン・アウト型スライドショーで、各スライドごとに、流れる説明文(テロップ)を挿入したものである。

サンプル

朝焼けの針ノ木岳
針ノ木岳、スバリ岳を背に岩小屋沢岳への登り
剣岳を真近に望む
鹿島槍ヶ岳、後立山連峰
岩小屋沢、鳴沢岳を背に岳爺ヶ岳への登り

本サンプル表示用HTML

<div id="stage">
	<div id="frame">
      <div id="photo1" class="pic"><img src="wp-images/1.jpg"><span>朝焼けの針ノ木岳</span></div>
      <div id="photo2" class="pic"><img src="wp-images/2.jpg"><span>針ノ木岳、スバリ岳を背に岩小屋沢岳への登り</span></div>
      <div id="photo3" class="pic"><img src="wp-images/3.jpg"><span>剣岳を真近に望む</span></div>
      <div id="photo4" class="pic"><img src="wp-images/4.jpg"><span>鹿島槍ヶ岳、後立山連峰</span></div>
      <div id="photo5" class="pic"><img src="wp-images/5.jpg"><span>岩小屋沢、鳴沢岳を背に岳爺ヶ岳への登り</span></div>
    </div>
</div>

HTML概要説明

「フェイドイン・アウト型スライドショー」に追加したコードのみについて記述する。
・#photo1,#photo2,,, の各divの写真に相当する説明文を、div内のspanとしてそれぞれ記述する。

本サンプル表示用CSS

#stage {
	position: relative;
	width: 600px;
	height:338;
	margin: 0 auto;
	background:#ddd;
}
.pic {
	position: absolute;
	width: 600px;
	height: 338px;
}
.pic img {
	opacity:0;
	-moz-animation: imgTrans 40s infinite;
	-webkit-animation: imgTrans 40s ease-in infinite;
	animation: imgTrans 40s infinite;
}
.pic span {
	color:#fffffc;
	position:absolute;
	top:300px;left:650px;
	display:block;
	font-size:22px;
	font-weight:bold;
	width:500px;
	-webkit-animation: telop 40s linear infinite;
	animation: telop 40s linear infinite;
}
#photo1 img, #photo1 span {
	-moz-animation-delay: 0s;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}
#photo2 img, #photo2 span {
	-moz-animation-delay: 8s;
	-webkit-animation-delay: 8s;
	animation-delay: 8s;
}
#photo3 img, #photo3 span {
	-moz-animation-delay: 16s;
	-webkit-animation-delay: 16s;
	animation-delay: 16s;
}
#photo4 img, #photo4 span{
	-moz-animation-delay: 24s;
	-webkit-animation-delay: 24s;
	animation-delay: 24s;
}
#photo5 img, #photo5 span {
	-moz-animation-delay: 32s;
	-webkit-animation-delay: 32s;
	animation-delay: 32s;
}
#frame {
	width: 600px;
	height: 338px;
	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; }
}
@-webkit-keyframes telop {
 0% { left:650px; opacity:1;}
 18% { left: -100px; opacity:1;}
 25% { left: -300px; opacity:0;}
 100% { left: -300px; opacity:0;}
}
@keyframes telop {
 0% { left:650px; opacity:1;}
 18% { left: -100px; opacity:1;}
 25% { left: -300px; opacity:0;}
 100% { left: -300px; opacity:0;}
}

CSSのポイント説明

「フェイドイン・アウト型スライドショー」に追加したコードのみについて記述する。
・span 内文字列のプロパティー設定と、animationの設定。
・animation は、写真のanimation と同期させ、同じ間隔に設定する。イージングは付けず linear に設定した。

コメント

フェイドイン・アウト型スライドショー(テロップ入り) — 17件のコメント

  1. いつもお世話になっております。
    今回はフェイドイン・アウト型スライドショー(テロップ入り)をお借りしました。
    いつも大変助かっております。ありがとうございました。
    これからもお体にお気をつけて頑張ってください。
    よろしくお願いいたします。

    • お役に立てて幸いです。
      いろいろ旅されているご様子。うらやましい限りです。
      kyoshi様も、お体にお気をつけて頑張ってください。

  2. はじめまして。
    フェイドイン・アウト型スライドショー(テロップ入り)をレスポンシブでお借りしたいのですが、CSSのどこの部分を変更したらよいのでしょうか?アドバイス頂けたら幸いします。
    よろしくお願いいたします。

    • nobuyukiさんこんにちは。

      レスポンシブにするには、「フェイドイン・アウト型スライドショー(レスポンシブ)」のcssのポイント説明に記している部分と同じ編集をしてください。
      さらに、テロップの部分ですが、.pic span { の中の、top:300px;left:650px;を、
      top:85%;left:105%; に書き換えてください。これで見た目問題ないと思いますが、小さい画面サイズでテロップの位置が下になりすぎると気になるようでしたら、
      @media screen and ( max-width:***px) { で、テロップの位置や、サイズを指定してください。

      • お世話になってます。
        お返事ありがとうございます。
        ためした結果、写真1枚目だけがテロップが表示されなく、2枚目からは、テロップ動きます。画像のtopに高さ15px位の画像幅、色#dddのBOX出てきてスライドしてもその高さの状態です。ちじめる方向(スマホ側)にスライドをすると幅は、問題無くレスポンシブになってますが画像のbottom側に色#dddのBOXがあらわれ、だんだんと高くなります。#framecssのheight:autoにすると画像が消えてしまいます。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;
        }
        .pic span {
        color:#fffffc;
        position:absolute;
        top:80%;left:105%;
        display:block;
        font-size:22px;
        font-weight:bold;
        width:500px;
        -webkit-animation: telop 40s linear infinite;
        animation: telop 40s linear infinite;
        }
        #photo1 img, #photo1 span {
        -moz-animation-delay: 0s;
        -webkit-animation-delay: 0s;
        animation-delay: 0s;
        }
        #photo2 img, #photo2 span {
        -moz-animation-delay: 8s;
        -webkit-animation-delay: 8s;
        animation-delay: 8s;
        }
        #photo3 img, #photo3 span {
        -moz-animation-delay: 16s;
        -webkit-animation-delay: 16s;
        animation-delay: 16s;
        }
        #photo4 img, #photo4 span{
        -moz-animation-delay: 24s;
        -webkit-animation-delay: 24s;
        animation-delay: 24s;
        }
        #photo5 img, #photo5 span {
        -moz-animation-delay: 32s;
        -webkit-animation-delay: 32s;
        animation-delay: 32s;
        }
        #frame {
        width: 100%;
        height: 400px;
        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; }
        }
        @-webkit-keyframes telop {
        0% { left:650px; opacity:1;}
        18% { left: -100px; opacity:1;}
        25% { left: -300px; opacity:0;}
        100% { left: -300px; opacity:0;}
        }
        @keyframes telop {
        0% { left:650px; opacity:1;}
        18% { left: -100px; opacity:1;}
        25% { left: -300px; opacity:0;}
        100% { left: -300px; opacity:0;}
        }

        • cssは全く問題ありません。
          こちらのファイルで、cssを置き換えて試したところ、Ie、Chromeともに、うまく動きます。もちろん、最初のスライドから、telopが流れます。

  3. お世話になってます。
    アドバイスありがとうございます。
    CSSを変更しやっと思うような動きになりました。

    今度は画像を4枚増やし9枚にしましたが最初動きは、1枚~9枚スライドをするが
    次からは、6枚目~9枚目の繰り返しの動きになります。
    アドバイス頂けたら幸いします。
    #stage {
    position: relative;
    max-width: 600px;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
    background-color: #FFFFFF;
    margin-bottom: 15px;
    }
    #frame {
    width: 100%;
    height: 300px;
    position: relative;
    overflow: hidden;
    }
    .pic {
    position: absolute;
    width: 100%;
    height: auto;
    }
    .pic img {

    opacity:0;
    -moz-animation: imgTrans 72s infinite;
    -webkit-animation: imgTrans 72s ease-in infinite;
    animation: imgTrans 72s infinite;
    }
    .pic span {
    color:#fffffc;
    position:absolute;
    top:85%;left:105%;
    display:block;
    font-size:22px;
    font-weight:bold;
    width:500px;
    -webkit-animation: telop 72s linear infinite;
    animation: telop 72s linear infinite;
    }
    #photo1 img, #photo1 span {
    -moz-animation-delay: 0s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    }
    #photo2 img, #photo2 span {
    -moz-animation-delay: 8s;
    -webkit-animation-delay: 8s;
    animation-delay: 8s;
    }
    #photo3 img, #photo3 span {
    -moz-animation-delay: 16s;
    -webkit-animation-delay: 16s;
    animation-delay: 16s;
    }
    #photo4 img, #photo4 span{
    -moz-animation-delay: 24s;
    -webkit-animation-delay: 24s;
    animation-delay: 24s;
    }
    #photo5 img, #photo5 span {
    -moz-animation-delay: 32s;
    -webkit-animation-delay: 32s;
    animation-delay: 32s;
    }
    #photo6 img, #photo6 span {
    -moz-animation-delay: 40s;
    -webkit-animation-delay: 40s;
    animation-delay: 40s;
    }
    #photo7 img, #photo7 span {
    -moz-animation-delay: 48s;
    -webkit-animation-delay: 48s;
    animation-delay: 48s;
    }
    #photo8 img, #photo8 span {
    -moz-animation-delay: 56s;
    -webkit-animation-delay: 56s;
    animation-delay: 56s;
    }
    #photo9 img, #photo9 span {
    -moz-animation-delay: 64s;
    -webkit-animation-delay: 64s;
    animation-delay: 64s;
    }

    • スライドが9枚になれば、スライドを切り替えるanimationのタイミングも変えなければなりません。
      すなわち、5枚でしたら全体の40秒の1/5、すなわち20%間隔になりますが、9枚では、全体の72秒の1/9、すなわち11.1%間隔になります。
      ですから、animationの記述は、例えば、以下のようになります。
      @keyframes imgTrans {
      0% { opacity:0; }
      3% { opacity:1; }
      10% { opacity:1; }
      13% { opacity:0; }
      100% { opacity:0; }
      テロップのanimationも同様です。

      • お世話になってます
        アドバイスありがとうございます
        下記のCSSを変更したらいいのでしょうか?
        よろしくお願いいたします
        @-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; }
        }
        @-webkit-keyframes telop {
        0% { left:650px; opacity:1;}
        18% { left: -100px; opacity:1;}
        25% { left: -300px; opacity:0;}
        100% { left: -300px; opacity:0;}
        }
        @keyframes telop {
        0% { left:650px; opacity:1;}
        18% { left: -100px; opacity:1;}
        25% { left: -300px; opacity:0;}
        100% { left: -300px; opacity:0;}
        }

  4. お世話になってます
    アドバイスありがとうございます
    上手く動かないです
    下記の記述の変更の%は、どうしたらいいのでしょうか?
    よろしくお願いします
    @-webkit-keyframes telop {
    0% { left:650px; opacity:1;}
    18% { left: -100px; opacity:1;}
    25% { left: -300px; opacity:0;}
    100% { left: -300px; opacity:0;}
    }
    @keyframes telop {
    0% { left:650px; opacity:1;}
    18% { left: -100px; opacity:1;}
    25% { left: -300px; opacity:0;}
    100% { left: -300px; opacity:0;}
    }

    • スライドと同様の変更でどうですか。
      18%->10%、25%→13%。
      自分なりに調節してください。

  5. お世話になってます
    いろいろアドバイスありがとうございます
    先頭に戻ってくれないです
    5枚目~9枚目の繰り返しです?
    他、記述変更ありますか?
    よろしくお願いします

  6. お世話になってます。
    @media only screen and (min-width: 481px)
    @media only screen and (min-width: 769px)
    のCSSで40Sのままでした。変更後、うまく動きました。
    いろいろお手数おかけしました。
    ありがとうございました

    • 動きましたか。
      おめでとうございます。
      やれやれ、これで明日からの山旅を落ち着いて楽しめそうです。

コメントを残す

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