See the Pen
Untitled by チータツ (@cheese_fuji)
on CodePen.
画像がずらっと並んだカルーセルスライダー的なのではなく、画像を1枚ずつ表示するタイプのスライドショーです。
画像を4枚を表示する想定で作成しています。
CSSの解説
コードを見る
余計な装飾を省いています。
HTML
<div class="slide-show">
<img src="">
<img src="">
<img src="">
<img src="">
</div>
CSS
/*** スライドショー ***/
.slide-show{
position: relative; /*子要素の起点*/
margin: 0 auto; /*中央配置*/
width: 640px; /*任意の幅*/
height: 360px; /*任意の高さ*/
overflow: hidden; /*外側要素の非表示*/
}
/*** スライド(画像) ***/
.slide-show > img{
position: absolute;
top: 0;
left: 100%; /*右側へ隠す*/
width: 100%;
height: 100%;
animation: slide 20s linear forwards infinite; /*スライドアニメーション(ループ)*/
}
/*1枚目*/
.slide-show > img:nth-of-type(1){
animation: slide 20s linear forwards infinite, slide-start 20s linear; /*2つのアニメーション*/
}
/*** 2枚目移行は 1/4時間ずつ遅らせる ***/
.slide-show > img:nth-of-type(2) {
animation-delay: 5s; /* 1/4の遅延 */
}
.slide-show > img:nth-of-type(3) {
animation-delay: 10s; /* 2/4の遅延 */
}
.slide-show > img:nth-of-type(4){
animation-delay: 15s; /* 3/4の遅延 */
}
/*** スライドアニメーション ***/
@keyframes slide{
0% {
left: 100%; /*右*/
}
3%, 25%{ /*画像が4枚なので 1/4 まで*/
left: 0; /*表示*/
}
28%,100%{
left: -100%; /*左*/
}
}
/*** 画面表示時の1枚目のアニメーション(1回のみ) ***/
@keyframes slide-start{
0%,25%{
left: 0; /*表示*/
}
28%,100%{
left: -100%; /*左へ隠す*/
}
}
overflow: hiddenを指定した親要素の外に画像を配置しておき、以下の動作を時間差で各画像に適用させます。
右から画像をスライドさせて登場 → 一定時間待機 → 一定時間後に左へスライドして退場
図解にするとこんな感じ
- 親要素 .slide-show
- 任意のサイズを指定
- 子要素(画像)の起点にするため、position: relativeを指定
- overflow: hiddenで範囲外の要素を隠す(重要)
- 子要素 img(共通)
- position: absoluteを使い、表示範囲の右側left: 100%へ配置(共通)
- スライドアニメーションanimation: slide 20s linear forwards infinite を指定する
(アニメーション名|時間|直線移動|終了時維持|ループ)
- 1枚目のみ2つのアニメーションを指定 img:nth-of-type(1)
- スライドアニメーション slide
- 画面表示時のアニメーション slide-start
これがないと最初に空白が表示される
- 2枚目以降は開始を遅らせる img:nth-of-type(2)~(4)
- animation-delay: 全体の1/4時間 で遅延時間を指定
- スライドアニメーション slide
- 0%:表示範囲より右 left: 100%
- ~3%:表示範囲へスライド left: 0
- ~ 25%:そのまま待機 left: 0
(ここで次の画像もアニメーション開始) - ~28%:範囲より左へ left: -100%
(ここで次の画像がスライドしてくる)
- 画面表示時のアニメーション slide-start(1枚目の初回だけ)
- ~25%:範囲内に表示しておくleft: 0
- ~28%:範囲の左へスライドleft: -100%
画面表示時から左→右のスライドを最初から行ってしまうと、最初に何もない空間から画像がスライドされます。それを避けるために1枚目の画像に1回だけ slide-startアニメーションを適用させます。
ただし、2周目以降は通常のスライド slide をさせたいので、animationをコンマで分けて2つとも指定します。
(slide-startを後ろに書きましょう)
画像の枚数を変更する場合
画像 (img) の数を増やす・減らす場合は、アニメーションの時間などを変更する必要があります。
(変更箇所)
・animation の指定時間を「枚数 × 5秒」に(例:10枚なら50s)
・2枚目以降の animation-delay は5秒ごと
・アニメーションの left: 0 の時間を 「100% / 枚数」に(例:10枚なら10%まで)
下記に例としていくつか枚数を変えた場合のCSSを記載しておきます。
画像が2枚の時のCSS
/*** スライドショー ***/
.slide-show{
position: relative; /*子要素の起点*/
width: 640px; /*任意の幅*/
height: 360px; /*任意の高さ*/
margin: 0 auto;
overflow: hidden; /*外側要素の非表示*/
}
/*** スライド ***/
.slide-show > img{
position: absolute;
top: 0;
left: 100%; /*右側へ隠す*/
width: 100%;
height: 100%;
animation: slide 10s linear forwards infinite; /*時間は 枚数×5s */
}
/*1枚目*/
.slide-show > img:nth-of-type(1){
animation: slide 10s linear forwards infinite, slide-start 10s linear; /*2つのアニメーション*/
}
/*** 2枚目移行は 1/2時間遅らせる ***/
.slide-show > img:nth-of-type(2) {
animation-delay: 5s; /* 1/2の遅延 */
}
/*** スライドアニメーション ***/
@keyframes slide{
0% {
left: 100%; /*右*/
}
3%, 50%{
left: 0; /*表示*/
}
53%,100%{
left: -100%; /*左*/
}
}
/*** 画面表示時の1枚目のアニメーション(1回のみ) ***/
@keyframes slide-start{
0%,50%{
left: 0; /*表示*/
}
53%,100%{
left: -100%; /*左へ隠す*/
}
}
画像が3枚の時のCSS
/*** スライドショー ***/
.slide-show{
position: relative; /*子要素の起点*/
width: 640px; /*任意の幅*/
height: 360px; /*任意の高さ*/
margin: 0 auto;
overflow: hidden; /*外側要素の非表示*/
}
/*** スライド ***/
.slide-show > img{
position: absolute;
top: 0;
left: 100%; /*右側へ隠す*/
width: 100%;
height: 100%;
animation: slide 15s linear forwards infinite;
}
/*1枚目*/
.slide-show > img:nth-of-type(1){
animation: slide 15s linear forwards infinite, slide-start 15s linear; /*2つのアニメーション*/
}
/*** 2枚目移行は 1/3時間ずつ遅らせる ***/
.slide-show > img:nth-of-type(2) {
animation-delay: 5s; /* 1/3の遅延 */
}
/*3枚目*/
.slide-show > img:nth-of-type(3) {
animation-delay: 10s; /* 2/3の遅延 */
}
/*** スライドアニメーション ***/
@keyframes slide{
0% {
left: 100%; /*右*/
}
3%, 33.333%{ /*画像が3枚なので 1/3 まで*/
left: 0; /*表示*/
}
36.333%,100%{
left: -100%; /*左*/
}
}
/*** 画面表示時の1枚目のアニメーション(1回のみ) ***/
@keyframes slide-start{
0%,33.333%{ /*画像が3枚なので 1/3 まで*/
left: 0; /*表示*/
}
36.333%,100%{
left: -100%; /*左へ隠す*/
}
}
画像が5枚の時のCSS
/*** スライドショー ***/
.slide-show{
position: relative; /*子要素の起点*/
width: 640px; /*任意の幅*/
height: 360px; /*任意の高さ*/
margin: 0 auto;
overflow: hidden; /*外側要素の非表示*/
}
/*** スライド ***/
.slide-show > img{
position: absolute;
top: 0;
left: 100%; /*右側へ隠す*/
width: 100%;
height: 100%;
animation: slide 25s linear forwards infinite;
}
/*1枚目*/
.slide-show > img:nth-of-type(1){
animation: slide 25s linear forwards infinite, slide-start 25s linear; /*2つのアニメーション*/
}
/*** 2枚目移行は 1/5時間ずつ遅らせる ***/
.slide-show > img:nth-of-type(2) {
animation-delay: 5s; /* 1/5の遅延 */
}
/*3枚目*/
.slide-show > img:nth-of-type(3) {
animation-delay: 10s; /* 2/5の遅延 */
}
/*4枚目*/
.slide-show > img:nth-of-type(4){
animation-delay: 15s; /* 3/5の遅延 */
}
/*5枚目*/
.slide-show > img:nth-of-type(5){
animation-delay: 20s; /* 4/5の遅延 */
}
/*** スライドアニメーション ***/
@keyframes slide{
0% {
left: 100%; /*右*/
}
3%, 20%{ /*画像が5枚なので 1/5 まで*/
left: 0; /*表示*/
}
23%,100%{
left: -100%; /*左*/
}
}
/*** 画面表示時の1枚目のアニメーション(1回のみ) ***/
@keyframes slide-start{
0%,20%{
left: 0; /*表示*/
}
23%,100%{
left: -100%; /*左へ隠す*/
}
}
カスタムプロパティを使っての一括指定を...と考えましたが、無理でした(笑)
応用CSS
拡大・縮小しながらスライド
スライドアニメーションと同時にtransform: scale()のスケール変化を追記して、拡大しながら登場・縮小しながら退場の動きを作ったもの。
See the Pen
Untitled by チータツ (@cheese_fuji)
on CodePen.
画像を表示するタイミングにtransform: scale(1)、退場する(範囲外の)タイミングにtransform: scale(0.1)を追記するだけです。