公開日時：2022.08.04
最終更新日:2022/08/04
CSSアニメーションでフェードのスライドショーを作ろう！
こんにちは！
冷房が足に直撃で足が冷えきっているGlobal Web Designの福田です(笑)
前回Swiperというスライドショーをご紹介しましたが(記事はこちら)、今回はJavaScriptを使わずに、CSSアニメーションでフェイドするスライドショーをご紹介していきます！
CSSのみで出来るので
「JavaScriptが難しい…」
とお思いの方は参考にしてみてください！
目次
土台づくり
まずはHTML、CSSからコーディングしていきます。
<div class="img-box">
<div></div>
<div></div>
<div></div>
</div>.img-box{
width: 100%;
height: 46vw;
overflow: hidden;
position: relative;
}
.img-box>div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 46vw;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
z-index: 10;
}
/* 1枚目のスライド */
.img-box>div:first-of-type{
background-image: url(../img/img.jpg);
}
/* 2枚目のスライド */
.img-box>div:nth-of-type(2){
background-image: url(../img/img2.jpg);
}
/* 3枚目のスライド */
.img-box>div:last-of-type{
background-image: url(../img/img3.jpg);
}今回はフェイドで表示させる部分は「background-image」で指定しました。
写真が少しズームアップしてから、次の写真がフェードで表示するようにしたいので、ズームアップしたときに要素から画像がはみ出さないように、「img-box」に「overflow: hidden;」をかけてはみ出した部分を非表示にしています。
親要素の「img-box」に「position: relative;」を書いて、背景画像は同じ位置に来るように「position: absolute;」「 top: 0;」「 left: 0;」を書いています。
ブラウザで見ると
3枚目の背景画像が1番上に表示されています。
アニメーションをつける
下準備ができたら「animation」を使いフェードを実装していきます。
.img-box{
width: 100%;
height: 46vw;
overflow: hidden;
position: relative;
}
.img-box>div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 46vw;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
z-index: 10;
/* 追記 */
opacity: 0;
animation-name: fade;
animation-duration: 12s;
animation-iteration-count: infinite;
}
@keyframes fade {
0%{
opacity: 0;
}
20%{
opacity: 1;
}
80%{
opacity: 0;
transform: scale(1.2);
}
100%{
opacity: 0;
z-index: 0;
}
}
/* 1枚目のスライド */
.img-box>div:first-of-type{
background-image: url(../img/img.jpg);
}
/* 2枚目のスライド */
.img-box>div:nth-of-type(2){
background-image: url(../img/img2.jpg);
}
/* 3枚目のスライド */
.img-box>div:last-of-type{
background-image: url(../img/img3.jpg);
}CSSで「animation」の指定をしました。
「opacity: 0;」で画像を透明にして見えなくしています。
次に「animation-name: fade;」としてアニメーションの名前を「fade」にしました。
「animation-duration: 12s;」でアニメーションの時間を12秒としました。
「animation-iteration-count: infinite;」でアニメーションを無限にループさせています。
「@keyframes fade」の中身は0%〜20%にかけて「opacity: 0;」〜「opacity: 1;」に不透明にして、20%〜80%で背景画像を「transform: scale(1.2);」拡大しながら、次の写真が見るように「z-index: 0;」で1番上の写真を下に潜りこませ、「opacity: 0;」でまた透明にしています。
ブラウザで見ると
画像がすべて同じタイミングで動いています。
animation-delayで2,3枚目をずらす
アニメーションができたので、「animation-delay」を使って表示させる画像をずらしていきます。
全体のアニメーション時間が12秒なので、4秒間経ったあとに次の写真が出るように設定していきます。
.img-box{
width: 100%;
height: 46vw;
overflow: hidden;
position: relative;
}
.img-box>div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 46vw;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
z-index: 10;
opacity: 0;
animation-name: fade;
animation-duration: 12s;
animation-iteration-count: infinite;
}
@keyframes fade {
0%{
opacity: 0;
}
20%{
opacity: 1;
}
80%{
opacity: 0;
transform: scale(1.2);
}
100%{
opacity: 0;
z-index: 0;
}
}
/* 1枚目のスライド */
.img-box>div:first-of-type{
background-image: url(../img/img.jpg);
}
/* 2枚目のスライド */
.img-box>div:nth-of-type(2){
background-image: url(../img/img2.jpg);
/* 追記 */
animation-delay: 4s;
}
/* 3枚目のスライド */
.img-box>div:last-of-type{
background-image: url(../img/img3.jpg);
/* 追記 */
animation-delay: 8s;
}2枚目のスライドは「animation-delay: 4s;」で4秒経ったあとにアニメーションがスタートし、「3枚目のスライド」は「animation-delay: 8s;」で8秒経ったあとにアニメーションがスタートするので、画像が重なることなくきれいにフェードしてくれます。
完成はこちら！
See the Pen フェード by Fukuda Yuzuru (@fukuda-yuzuru) on CodePen.
まとめ
いかがでしたでしょうか？
今回はCSSアニメーションでフェイドするスライドショーをご紹介しました！
CSSアニメーションは使い慣れるととても便利ですので、フェイフェイドするスライドをご自身で実装してみて、CSSアニメーションになれるのが良いと思います！
Webサイトのトップページにフェイドするスライドショーは使えるのでぜひ実装してみてください！
