[CSS] 画像がフェードインするスライドショーをCSSだけで作る
- CSSのアニメーション機能を使えば、CSSだけで画像をふわっとフェードイン、フェードアウトさせたスライドショーが実装できます
- プラグインのインクルードも不要で動作も軽快なので、ちょっとした場面で活用できます
サンプルコード
html
<ul class="slider_fade">
<li><img src="./images/slider_01.jpg"></li>
<li><img src="./images/slider_02.jpg"></li>
<li><img src="./images/slider_03.jpg"></li>
</ul>
CSS
.slider_fade {
position: relative;
}
.slider_fade > li {
position: absolute;
list-style: none;
visibility: hidden;
animation: anime_slider_fade 12s 0s infinite;
}
.slider_fade > li:nth-of-type(2) {
animation-delay: 4s;
}
.slider_fade > li:nth-of-type(3) {
animation-delay: 8s;
}
@keyframes anime_slider_fade {
0% {
visibility: visible;
opacity: 0;
}
15% {
opacity: 1;
}
33.3% {
opacity: 1;
}
48.3% {
opacity: 0;
}
100% {
opacity: 0;
}
}
ソースコードの解説
- スライドする画像の枚数によって、「anime_slider_fade」のパーセント配分を調整する必要があります
- サンプルコードでは3枚の画像をスライドしているため、100%を三等分した33.3%を区切りとしています
- 0%から15%の間にopacityで透過率を上げてふわっと表示、区切りとなる33.3%から48.3%の間に透過率を下げてふわっと消しています
- 2枚目の画像は、animation-delayで指定された時間差によって、1枚目の画像が消え始めた頃に表示し始めるという動きになります
ご質問など受け付けています
記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。
ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。