Zenn
🔑

CSSのanimationでスライドショーを作る

2022/12/01に公開
CSS
tech

この記事は、Qiitaで公開した『【AXT-bgSlide】思い立ったからHTMLに背景スライドショーを挿入するJavaScript作った』の技術詳細記事です。
https://qiita.com/AXT_AyaKoto/items/fc36fe39ae32ec714ad5

画像スライドショーをwebサイトに埋め込みたかったから色々調べたり考えたりした結果がこれ。

面倒臭い方へ

JavaScriptでまとめて挿入できる関数を書きました、使ってください。

https://github.com/AyaExpTech/AXT-bgSlide

リリースノート記事はこちら。(Qiitaに飛びます)
https://qiita.com/AXT_AyaKoto/items/fc36fe39ae32ec714ad5

例として4枚をスライドショーすることを考えます

  • CSSのanimationで0%から25%の間だけopacity:1にすれば良さそう
  • 同じanimationをdelayをかけて適用すれば実現できそう

こういうこと

animation.css
@keyframes slideshow {
    0% {opacity:0}
    1% {opacity:1}
    25% {opacity:1}
    26% {opacity:0}
    100% {opacity:0}
}

100%を枚数で割ってその間だけopacityを1にするようなanimationをする
これを開始n秒ずらし/長さ4n秒で無限ループさせればOK

Author : 綾坂こと

Discussion