ほしいなぁと思ったので作りました。
本職じゃないのでそのくらいゆるいし、それでいいと思ってます。
配布名『AXT-bgSlide』
使用例
index.htmlも参照してください。
<script src="script.min.js"></script>
window.onload = function() {
bgSlide(["1.jpg", "2.jpg", "3.jpg", "4.jpg"], 3, 0.3, -1, `filter: brightness(0.5);`)
}
配布場所
技術詳細
基本方針
-
div#bgSlide > div*n(nは枚数)を作る - bodyの先頭にぶちこむ
- フェードのanimationをCSSで書く(%の値は枚数とフェード秒数から計算する)
-
:nth-child()を使ってbackground-imageを指定するCSSをforループで作ってkeyframesの指定と一緒にstyleタグとしてheadに挿入
細かい部分はzennで書きました。
規約
Author : 綾急技研(AyaExpTech)
Licensed by "AeTOS(Type-06)"
