スライドショー(右から左にスクロールするタイプ)

説明

右から左にスクロールするスライドショーを実現するには、あからじめスライドショーで使う画像を用意しておきます。ここでは4枚の画像を用意しました。この画像をbackground-imageとbackground-positionを使って横に並べて配置します。ポイントとしては最初と最後の画像は同じものにしておくということです。このようにすることで切れ目なくスライドさせる事ができます。
次にアニメーション部分はanimationプロパティに移動する時間(アニメーション時間に該当します)を指定します。数値を大きくするとゆっくりとスクロールするようになります。
アニメーションフレームのキーは0%の時は初期位置を、100%の時は最後の画像がちょうど左側0pxになるようにします。最初に表示される画像と最後に表示される画像を同じにしたのには、このためです。

サンプル サンプルを実行 サンプルをダウンロード

■HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3例文辞典サンプル</title>
<link rel="stylesheet" href="css/main.css"">
<body>
<h1>CSS3でスライドショー</h1>
<div id="slide"></div>
</body>
</html>
■CSS
#slide {
width: 384px;
height:216px;
border:1px solid red;
background-color: gray;
background-repeat: no-repeat;
background-image: url(images/1.jpg), url(images/2.jpg), url(images/3.jpg), url(images/4.jpg), url(images/1.jpg);
background-position: 0px top, 384px top, 768px top, 1152px top, 1536px top;
animation : "side" 20s linear 0s infinite normal;
-webkit-animation : "side" 20s linear 0s infinite normal;
}
@keyframes "side" {
0% { background-position: 0px top, 384px top, 768px top, 1152px top, 1536px top; }
100% { background-position: -1536px top, -1152px top, -768px top, -384px top, 0px top, 384px top; }
}
@-webkit-keyframes "side" {
0% { background-position: 0px top, 384px top, 768px top, 1152px top, 1536px top; }
100% { background-position: -1536px top, -1152px top, -768px top, -384px top, 0px top, 384px top; }
}
目次に戻る