なるべくJS使わずCSSだけで実装したいyukipanです。
今の時代、ただ画像をふわっと切り替えるだけなら、JS使わなくてもCSSたけで実装できるんですね〜。ステキ。画像だけふわっと切り替わるバージョンと、背景画像で切り替わるバージョンを作ってみました。
サンプルページも作ってみたので参考にどうぞ〜。
目次
画像だけふわっと切り替えバージョン
画像だけでふわっと切り替わります。
HTML
<div class="slideBox">
<img class="item1" src="assets/images/img1.jpg" alt="">
<img class="item1" src="assets/images/img2.jpg" alt="">
<img class="item1" src="assets/images/img3.jpg" alt="">
</div>スライドさせたい画像srcを書く。
CSS
.slideBox {
height: 500px;
overflow: hidden;
position: relative;
}
/* imgのみ */
.item1 {
opacity: 0;
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
left: 0;
top: 0;
-webkit-animation: anime 30s 0s infinite;
animation: anime 30s 0s infinite;
}
.item1:nth-of-type(2) {
-webkit-animation-delay: 10s;
animation-delay: 10s;
}
.item1:nth-of-type(3) {
-webkit-animation-delay: 20s;
animation-delay: 20s;
}
/* ふわっとアニメーション */
@keyframes anime {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
35% {
opacity: 1;
}
50% {
opacity: 0;
z-index: 9;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes anime {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
35% {
opacity: 1;
}
50% {
opacity: 0;
z-index: 9;
}
100% {
opacity: 0;
}
}.slideBoxで高さを記載しているので、好きな高さに調整してください。
画像3枚を10秒で切り替えするため、全部で30秒かかる。なので「animation: anime 30s 0s infinite;」でループするanimationを書く。2枚目と3枚目がそれぞれ10秒後、20秒後にanimationするように調整。
速度を速くしたかったり、画像の枚数を増やしたかったら、上記の秒数を調整すると良いです。
ふわっと感は@keyframesで調整できます。ここは好みな気がするのでいろいろ試してみるとおもしろいかも。
スライド画像4枚の場合
枚数を増やす場合は、アニメーションの時間やタイミングを変更する。
HTML
<div class="slideBox">
<img class="item1" src="assets/images/img1.jpg" alt="">
<img class="item1" src="assets/images/img2.jpg" alt="">
<img class="item1" src="assets/images/img3.jpg" alt="">
<img class="item1" src="assets/images/img4.jpg" alt="">
</div>CSS
.slideBox {
height: 500px;
overflow: hidden;
position: relative;
}
/* imgのみ */
.item1 {
opacity: 0;
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
left: 0;
top: 0;
-webkit-animation: anime 40s 0s infinite;
animation: anime 40s 0s infinite;
}
.item1:nth-of-type(2) {
-webkit-animation-delay: 10s;
animation-delay: 10s;
}
.item1:nth-of-type(3) {
-webkit-animation-delay: 20s;
animation-delay: 20s;
}
.item1:nth-of-type(4) {
-webkit-animation-delay: 30s;
animation-delay: 30s;
}
/* ふわっとアニメーション */
@keyframes anime {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
25% {
opacity: 1;
}
40% {
opacity: 0;
z-index: 9;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes anime {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
25% {
opacity: 1;
}
40% {
opacity: 0;
z-index: 9;
}
100% {
opacity: 0;
}
}文字を上に表示するバージョン
背景画像の上にロゴやテキストが置いてある、サイトのトップページによくあるやーつ。
HTML
<div class="slideBox">
<p class="title">cssのみでつくったスライド</p>
<div class="item2" style="background-image: url(./assets/images/img1.jpg)"></div>
<div class="item2" style="background-image: url(./assets/images/img2.jpg)"></div>
<div class="item2" style="background-image: url(./assets/images/img3.jpg)"></div>
</div>ホントはCSSにbackground-image書いたほうがいいんだけど、画像差し替えたい時にめんどくさいからHTMLにstyleで書いてます。
CSS
.slideBox {
height: 500px;
overflow: hidden;
position: relative;
}
/* テキストがあるバージョン */
.title {
font-size: 32px;
color: #fff;
z-index: 11;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.item2 {
z-index: 10;
opacity: 0;
width: 100%;
height: 500px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
left: 0;
top: 0;
-webkit-animation: anime 30s 0s infinite;
animation: anime 30s 0s infinite;
}
.item2:nth-of-type(2) {
-webkit-animation-delay: 10s;
animation-delay: 10s;
}
.item2:nth-of-type(3) {
-webkit-animation-delay: 20s;
animation-delay: 20s;
}
/* ふわっとアニメーション */
@keyframes anime {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
35% {
opacity: 1;
}
50% {
opacity: 0;
z-index: 9;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes anime {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
35% {
opacity: 1;
}
50% {
opacity: 0;
z-index: 9;
}
100% {
opacity: 0;
}
}.titleでテキストが真ん中に表示されるようになってます。上に乗せる文字数や、ロゴなどの画像にする際は調整してください。
上に乗せるものによって変わるので、レスポンシブ対応のCSSにしてません。とりあえずleft: 50%;にしてます。
まとめ・参考サイト
HTMLとCSSをコピペしたらすぐ使えるようにコードを記載しているので、お好きにコピペして、そのまま使ってもいいですし、自分が使いやすいように改造してみてください。
下記サイトを参考にさせていただきました。ありがとうございます。
参考サイトはズームするスライドショーでした。
私はズームは必要なかったのでズーム機能は省きましたが、ズームさせたい方は参考になると思います。
