TL;DR
CSS だけで動く「ズームインとズームアウトをフェードしながら交互に繰り返す CSS スライダー」です。
slider デモ
作成したデモはこちら。交互にズームインとズームアウトを繰り返し表示しています。CSS でみたい人は「VIEW COMPILED」を押してください。
2019/01/29 追記：IE でカクつく場合は、以下を li に追加するか、@keyframes に width 幅を px で指定してください。
transform: rotate(0.0001deg);
参考にさせていただいたのは、css だけで作るスライダー – PeonyQueenで作成されているスライダー。 上記のスライダーがとてもよく出来ていて CSS のアニメーションで時間差をつけてスライドを切り替え、フェードインを繰り返すようになっています。CSS なので読み込みや動作も早く扱いやすいです。
こちらを参考に、html の img 記述をなくし、フェードインとフェードアウトを繰り返すようにカスタマイズさせていただきました。 5 枚の画像を切替えるバージョンです。html の記述はこれだけ。
実装
html
<div class="slider_css">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
SCSS
@mixin bp {
@media only screen and (max-width: 768px) {
@content;
}
}
.slider_css {
height: 550px;
margin: 0 auto;
position: relative;
overflow: hidden;
ul {
margin: 0;
padding: 0;
list-style: none;
li {
background-size: cover;
width: 100%;
height: 550px;
position: absolute;
top: 0;
left: 0;
animation-iteration-count: infinite;
animation-duration: 40s;
@for $value from 1 through 5 {
&:nth-child(#{$value}) {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/381167/animal#{$value}.jpg');
@if $value % 2 == 0 {
//偶数
animation-name: slider-zoomout;
} @else {
//奇数
animation-name: slider-zoomin;
}
@if $value != 1 {
//最初以外は透過
opacity: 0;
}
animation-delay: #{($value * 8-11)}s; //-3からスタートして、8づつ加算する
}
}
img {
width: 130%;
}
}
}
@include bp {
height: 400px;
ul {
li {
background-size: contain;
background-repeat: no-repeat;
}
}
}
}
// 5~8秒の間だけ透過解除
@keyframes slider-zoomin {
0% {
opacity: 0;
transform: scale(1);
}
12.5% {
opacity: 1;
}
20% {
opacity: 1;
}
27.5% {
opacity: 0;
}
100% {
opacity: 0;
transform: scale(1.3);
}
}
@keyframes slider-zoomout {
0% {
opacity: 0;
transform: scale(1.3);
}
12.5% {
opacity: 1;
}
20% {
opacity: 1;
}
27.5% {
opacity: 0;
}
100% {
opacity: 0;
transform: scale(1);
}
}
画像は CSS 背景に設定し、偶数と奇数の画像によって、ズームインとズームアウトのアニメーションを割り当てます。
ズームインだけ適用したい場合は、animation-name の箇所を、どちらも slider-zoomin にしてください。ズームアウトの場合は slider-zoomout ですね。
1 枚 8 秒(5 枚の画像 ×8 秒)で計算するので、アニメーション周期（animation-duration）は 40 秒で設定します。
1 枚目以外は透過させ、表示から開始させるので-3 秒からスタートし 8 秒づつ加算してアニメーション開始時間をずらします（animation-delay）。
| ◯ 枚目 | 1 | 2 | 3 | 4 | 5 | 6 |
|---|---|---|---|---|---|---|
| 開始時間 | -3 | 5 | 13 | 21 | 29 | 37 |
※1 枚目は-3 秒から開始し、2 枚目は 8 秒後の 5 秒から開始するという意味。
アニメーションは 40 秒間のうち 5~8 秒の間だけ透過解除したいので 12.5%（5×100/40=12.5）と 20%（8×100/40=20）に opacity:1 を設定。秒数を duration で割ります。
分かりにくいので表を作りました。以下の表だと、5 枚の時は 12.520%、4 枚の時は 15.6325%に opacity:1 を指定すればよいということになります。
1 枚 8 秒で設定した時の計算表
| 枚数 | duration | 5 秒 | 8 秒 |
|---|---|---|---|
| 3 | 24s | 20.83% | 33.33% |
| 4 | 32s | 15.63% | 25.00% |
| 5 | 40s | 12.50% | 20.00% |
| 6 | 48s | 10.42% | 16.67% |
※アニメーション周期や画像枚数を変更する場合は、このあたりを再計算する必要が出てきますが、仕組みが分かれば比較的使いやすいのではないでしょうか。以上、軽量・高速・簡単記述の CSS スライダーでした。