tro-suke blog

Homepage template is free, and the WordPress theme is free, too.
ホームページ制作/HPテンプレート無料、WordPressテーマも無料!!
blog top > CSS、PHP 備忘録 > ネットウォッチング > CSS3 だけでスライドショー その2

CSS3 だけでスライドショー その2

先日、匿名希望さんから「CSS3 だけでスライドショー」の記事について質問がありました。内容は、“スライドする写真の枚数を増やすには<li>-</li>の中身を増やすだけでは駄目でしょうか?”というものです。

結論から言うと、残念ながら<li>-</li>の中身を増やすだけではダメなんですね。javascriptなどで作った場合は、写真の枚数に合わせて増やしたり減らしたりと、比較的簡単な作業で済みますが、CSSで作成した場合は、写真の枚数に合わせてその分だけ記述を追加または削除してあげなければなりません。人によっては面倒くさいと思うかもしれませんが、CSS にしても javascript にしても一長一短があるってことですね。

slider3

写真を8枚に増やしたスライドショー

せっかくの質問ですので、前回の「CSS3 だけでスライドショー」をもう少し掘り下げて書いてみようと思います。技術的な文章は苦手ですので、うまく伝わるか心配ですがご了承ください。

まず、写真を増やしたいということですが、その前に4枚から3枚に減らしたときの動きを検証してみます。どんな感じに見えるかというと、動きが速くなって写真のフェイド効果に白が目立ってしまいますね。ということは、単に写真を増やした場合は、スライドの動きがゆっくりになってしまい、一番はじめの写真に戻るときはフェイド効果が重なってしまいます。ポイントはキーフレームの設定なんですね。

それでは写真を8枚に増やした場合はどうしたらいいのか?実際にソースを見ながら説明して行きましょう。今回はカスタムテキストの部分を分かりやすく横スライドにさせています。
「css3 animation」については、前回説明していますので今回は省きます。)

下は html での記述です。 html は単にリスト項目を増やすだけでOKです。

/* list */
<ul>
    <li><img alt="image01" src="DSCF001.jpg">
        <div>#1 北海道 旭山動物園</div></li>
    <li><img alt="image02" src="DSCF002.jpg">
        <div>#2 あべの ルミナリエ</div></li>
    <li><img alt="image03" src="DSCF003.jpg">
        <div>#3 京都 伊根の夏</div></li>
    <li><img alt="image04" src="DSCF004.jpg">
        <div>#4 鳥取 山陰の秋</div></li>
    <li><img alt="image05" src="DSCF005.jpg">
        <div>#5 長野 安曇野の夏</div></li>
    <li><img alt="image06" src="DSCF006.jpg">
        <div>#6 わー、雪降ってる</div></li>
    <li><img alt="image07" src="DSCF007.jpg">
        <div>#7 春 桜がきれい</div></li>
    <li><img alt="image08" src="DSCF008.jpg">
        <div>#8 京都 鴨川納涼床</div></li>
</ul>

重要なのはCSSで、写真を増やす分だけ記述を追加してあげます。
まず「animation-delay:」ですが、animation-delay プロパティは、変化がいつ始まるかを指定する際に使用します。スライドショーは1枚の写真を7秒で変化させています。

/* css3 delays */
.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
    -webkit-animation-delay: 7.0s;
    -moz-animation-delay: 7.0s;
    -ms-animation-delay: 7.0s;
    animation-delay: 7.0s;
}
.slides ul li:nth-child(3), .slides ul li:nth-child(3) div {
    -webkit-animation-delay: 14.0s;
    -moz-animation-delay: 14.0s;
    -ms-animation-delay: 14.0s;
    animation-delay: 14.0s;
}
.slides ul li:nth-child(4), .slides ul li:nth-child(4) div {
    -webkit-animation-delay: 21.0s;
    -moz-animation-delay: 21.0s;
    -ms-animation-delay: 21.0s;
    animation-delay: 21.0s;
}
.slides ul li:nth-child(5), .slides ul li:nth-child(5) div {
    -webkit-animation-delay: 28.0s;
    -moz-animation-delay: 28.0s;
    -ms-animation-delay: 28.0s;
    animation-delay: 28.0s;
}
.slides ul li:nth-child(6), .slides ul li:nth-child(6) div {
    -webkit-animation-delay: 35.0s;
    -moz-animation-delay: 35.0s;
    -ms-animation-delay: 35.0s;
    animation-delay: 35.0s;
}
.slides ul li:nth-child(7), .slides ul li:nth-child(7) div {
    -webkit-animation-delay: 42.0s;
    -moz-animation-delay: 42.0s;
    -ms-animation-delay: 42.0s;
    animation-delay: 42.0s;
}
.slides ul li:nth-child(8), .slides ul li:nth-child(8) div {
    -webkit-animation-delay: 49.0s;
    -moz-animation-delay: 49.0s;
    -ms-animation-delay: 49.0s;
    animation-delay: 49.0s;
}

主要ブラウザのベンダープレフィックスは、下記を参考にしてください。
-webkit- ……… Google Chrome、Safari
-moz-  ………… Firefox
-ms- …………… Internet Explorer
-o- ……………… Opera

次はポイントとなるキーフレームの設定です。

/* keyframes #anim_slides */
@-webkit-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    2% {
        left:3%;     /* テキストが左から3%の位置に */
        opacity:1;   /* テキストを透明度なしで表示 */
    }
    10% {
        left:3%;
        opacity:1;
    }
    12% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}

ソースはカスタムテキストの部分です。一つのアニメーションを100%で表現しています。写真が4枚のときは0%、6%、24%、30%、100%で指定していました。キーフレームの%を変更することによって、アニメーションの流れを設定できます。opacity: は透明度の指定で「opacity:0;」は完全に透明で「opacity:1;」は透明なしということです。もし「opacity:0.5;」とすれば透明度が半分ということですね。「left:100%;」は左からの位置が100%ということなので右側に隠れて見えなくなります。
二番目のキーフレームを例にとると、“アニメーションが2%のとき、カスタムテキストは左から3%の位置にあり、透明ではない”ということになります。

今回の記事を書くにあたり、実際に写真を8枚に増やしたスライドショーのサンプルをご用意しました。スライドショーのページからダウンロードできるようにしていますのでご覧ください。

今回のスライドショーでは、写真とカスタムテキストの二つのアニメーションがありますが、個別に指定しています。少しずらした効果がスライドショーを引き立てます。

 

コメントを残す

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

▲ page top