「CSS」だけで、背景画像のスライドショーを作成することができます。
「animation」プロパティを使用することで、
簡単な背景画像のスライドショーを作ることができます。

しかし、「Javascript」で作成するような、
背景画像のスライドショーがCSSで作れるわけではないので、
望む背景画像スライドによっては、「CSS」だけで作成するものでは作成できない。
出来そうな気もするが、「Javascript」を使用する方が、
まだ簡単にコーディングできそうです。
方法が見つかったら随時更新していきます。

INDEX

■ 「CSS」だけで、背景画像のスライドショーを作成する方法
■ 画像が表示されるタイミングのズレを防止する対策

「CSS」だけで、背景画像のスライドショーを作成する方法

「CSS」だけで背景画像のスライドショーを作成することは可能です。

ですが、透明度をコントロールする「Opacity」を使うと、
コンテンツも一緒に見えたり、消えたりしてしまう。

背景画像で「フェードイン」「フェードアウト」を使いたい場合は、
CSSだけで背景画像スライドショーを行うには、
背景画像ではなく、画像を変更して、フェードイン・アウトの背景画像スライドのように見せる方法などで行う。
これも、色々と試行錯誤が必要。
「Javascript」を使って作成するのが、一番簡単な様子。
ブラウザによってCSSの適用具合も異なることもあり、
CSSだけでの適用は、無理に行わない方がよさそう。

下記のサンプルコードは、背景画像をスライドショーにする基本的なサンプルコードです。

背景画像をスライドショーにするサンプルCSSコード

HTMLファイルの「head」タグに記述するコード

CSSに記述するコード

#ID名{
background-image: url('../Images/BackgroundImages/BG_001.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
animation: アニメーションの名前 10s ease 0s infinite normal;
-webkit-animation: アニメーションの名前 10s ease 0s infinite normal;
}

@keyframes アニメーションの名前 {
0% {
background-image: url('../Images/BackgroundImages/BG_001.jpg');
opacity: 0;
}
10% {
opacity: 1;
}
40% {
opacity: 1;
}
50% {
opacity: 0;
background-image: url('../Images/BackgroundImages/BG_002.jpg');
}
60% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
background-image: url('../Images/BackgroundImages/BG_001.jpg');
opacity: 0;
}
}

Back

画像が表示されるタイミングのズレを防止する対策

「HTML」には、「preload」という機能があるので、
「head」タグ内に、

を追加することで、
あらかじめ画像を読み込んでおくことができる。
「preload」しておくと、画像表示のタイミングが遅れることを防げる。

先読みできるコンテンツの種類は、

設定値	説明
audio	音声ファイル。
document	「frame」「iframe」に埋め込まれる「HTML」文書。
embed	「embed」要素の中に埋め込まれるリソース。
fetch	「ArrayBuffer」「JSON」ファイルのような「フェッチ」「XHR」要求でアクセスされるリソース。
font	フォントファイル
image	画像ファイル
object	「object」要素の中に埋め込まれるリソース
script	JavaScriptファイル
style	CSSスタイルシート
track	WebVTT ファイル
worker	「JavaScript」ウェブワーカーまたは共有ワーカー。
video	「video」で使用される動画ファイル。

など。

Back