サイト型トップページの作り方を公開しています！Check

CSSで複数画像を切り替えるアニメーションを作ってみる

アイキャッチ／CSSで複数画像切り替え テーマ共通
2024/09/04
テーマ共通
トップページアニメーション
記事内に広告が含まれています
スポンサーリンク

トップページのメインビジュアルに、画像スライダーやカルーセルなど複数の画像を切り替えるアニメーションがあると、ぱっと目を引くことができて華やかです。

通常、これらのアニメーションはJavaScriptを使って実装されますが、フェードイン・アウトといったシンプルな切り替えならCSSだけで作ることもできます。ページの読み込み速度が向上し、コードがシンプルに保たれるというメリットがあります。

この記事ではCSSで複数画像を切り替えるアニメーションを紹介します。

今回使うのはこれ。

サイトに「動き」をつけるCSSアニメーション／基本的な指定方法を覚えよう
この記事では、CSSアニメーションの基本的な指定方法やプロパティの使い方について解説します。 サイトに「動き」といえばJavascriptが必要？というイメージがあるかもしれませんが、アニメーションを使うことでCSSでもウェブページに動きを...
turicco.com

トップページのメインビジュアルとして使うためのポイントも掲載します。

スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • 2020年1月1日ブログ開設
  • ドメインパワー40
  • 2023年～有料記事公開
    • →累計280件（月間約20件）購入いただいています
はっちゃん
です
プロフィール

動き／CSSだけで複数画像を切り替えるアニメーション

以下の例では、５枚の画像を3秒ごとに、合わせて15秒かけて切り替えるアニメーションを繰り返しています。今回はこのアニメーションを作っていきます。

See the Pen 複数画像スライド by はっちゃん (@hacchan) on CodePen.

スポンサーリンク
目次に戻る

実装方法／CSSだけで複数画像を切り替えるアニメーション

実装するにはHTMLとCSSを使います。編集とバックアップについてはこちらのページをご確認ください。

Cocoonカスタマイズ／HTML・CSSの編集とワードプレスをバックアップする方法
HTML・CSSカスタマイズはサイトのデザインや機能性を向上させるのに効果的ですが、初めて作業する場合や慣れていないと戸惑うことがあります。 この記事ではバックアップ方法やHTMLやCSSの編集手順について説明します。 カスタマイズ作業に入...
turicco.com

画像の準備

事前に画像の準備をしておきましょう。画像パス（ファイルのURL）の取得方法。

  1. 「メディア」→「新しいメディアファイルを追加」で画像をアップロード
  2. 「URLをクリップボードにコピー」をクリックしてファイルのURLを取得します

写真の素材を探す際は素材数の多い写真ACが便利です。

高解像度の写真素材なら【写真AC】無料会員登録はこちら

HTML

<div class="slider-container">
    <div class="slideimg"></div>
    <div class="slideimg"></div>
    <div class="slideimg"></div>
    <div class="slideimg"></div>
    <div class="slideimg"></div>
</div>
  • 表示したい画像の枚数分、<div class="slideimg"></div>を追加します。
  • 画像パスはCSSで設定します

今回は５枚表示するので５個追加しています。

CSS

CSSを使用して画像を切り替える方法は、@keyframesとanimationプロパティを活用します。

/* 複数画像切り替え---------------------------------------------- */
.slider-container {
	position: relative; /* コンテナ内でスライド位置を相対的に設定 */
	width: 100%; /* コンテナ幅を100%に */
	height: 500px; /* コンテナの高さを固定 */
	overflow: hidden; /* スライドがコンテナ外に出ないように非表示 */
}

.slideimg {
	position: absolute; /* 位置を絶対指定で重ねて配置 */
	width: 100%; /* スライド画像の幅を100%に */
	height: 100%; /* スライド画像の高さを100%に */
	top: 0; /* 上からの位置を0に */
	left: 0; /* 左からの位置を0に */
	opacity: 0; /* 初期状態で透明に */
	background-size: cover; /* 画像をスライド全体にカバー */
	animation: slideAnime 15s infinite; /* 15秒で1サイクルのアニメーションを無限ループ */
}

@keyframes slideAnime {
	0%, 30%, 100% { opacity: 0; } /* 非表示のタイミングを設定 */
	10%, 20% { opacity: 1; } /* 表示されるタイミングを設定 */
}

/* 各スライドのアニメーションタイミングを均等にずらす */
.slideimg:nth-of-type(1){
	background-image: url('画像パス①'); /* 1枚目の画像を指定 */
	animation-delay: 0s; /* アニメーション開始を0秒遅延 */
}

.slideimg:nth-of-type(2) {
	background-image: url('画像パス②'); /* 2枚目の画像を指定 */
	animation-delay: 3s; /* アニメーション開始を3秒遅延 */
}

.slideimg:nth-of-type(3) {
	background-image: url('画像パス③'); /* 3枚目の画像を指定 */
	animation-delay: 6s; /* アニメーション開始を6秒遅延 */
}

.slideimg:nth-of-type(4) {
	background-image: url('画像パス④'); /* 4枚目の画像を指定 */
	animation-delay: 9s; /* アニメーション開始を9秒遅延 */
}

.slideimg:nth-of-type(5) {
	background-image: url('画像パス⑤'); /* 5枚目の画像を指定 */
	animation-delay: 12s; /* アニメーション開始を12秒遅延 */
}
スポンサーリンク
目次に戻る

解説／CSSだけで複数画像を切り替えるアニメーション

イメージ画像／pc／css

CSSでどのような設定をしているか役割ごとに説明しますね。

スライダーの枠を作る

まず、画像を表示する枠（コンテナ）を作ります。この枠は画像が切り替わるエリアです。

.slider-container {
	position: relative; /* コンテナ内でスライド位置を相対的に設定 */
	width: 100%; /* コンテナ幅を100%に */
	height: 500px; /* コンテナの高さを固定 */
	overflow: hidden; /* スライドがコンテナ外に出ないように非表示 */
}
  • position: relative; コンテナ内で画像を配置できるようにします。
    • →.slideimgにposition: absolute;を指定して配置
  • width と height: 枠のサイズを指定します。幅は100%、高さは500pxに設定しています。
  • overflow: hidden; 枠からはみ出した部分は見えなくします。

各画像の設定

次に、各画像をスライドとして配置します。

.slideimg {
	position: absolute; /* 位置を絶対指定で重ねて配置 */
	width: 100%; /* スライド画像の幅を100%に */
	height: 100%; /* スライド画像の高さを100%に */
	top: 0; /* 上からの位置を0に */
	left: 0; /* 左からの位置を0に */
	opacity: 0; /* 初期状態で透明に */
	background-size: cover; /* 画像をスライド全体にカバー */
	animation: slideAnime 15s infinite; /* 15秒で1サイクルのアニメーションを無限ループ */
}
  • position: absolute; 画像を枠の中で自由に配置できるようにします。
  • opacity: 0; 画像が最初は見えない状態にします。
  • animation: slideAnimation 15s infinite; 15秒ごとに画像が切り替わるアニメーションを繰り返し実行します。

画像とアニメーションの設定

ここでは画像が切り替わる動きを作ります。画像がフェードイン・フェードアウト（徐々に表示・非表示）しながら順番に表示されます。画像がどのタイミングで表示されるかを@keyframesで設定します。

@keyframes slideAnime {
	0%, 30%, 100% { opacity: 0; } /* 非表示のタイミングを設定 */
	10%, 20% { opacity: 1; } /* 表示されるタイミングを設定 */
}
  • 0%, 30%, 100% { opacity: 0; }
    • 画像が非表示になるタイミングを設定しています。各スライドは、最初と最後に非表示になり、中間の一部の時間も非表示にします。
  • 10%, 20% { opacity: 1; }
    • 画像が表示される時間を設定しています。ここでは10%から20%の間で画像が表示されます。

このキーフレーム設定により、各スライドは順番にフェードイン・フェードアウトし表示されるようになります。

画像ごとに切り替わりのタイミングをずらす

画像を設定し、時間差で表示されるようにアニメーションの開始タイミングを調整します。

今回は合計15秒で5枚なので3秒ごとアニメーションを遅らせて開始します。

/* 各スライドのアニメーションタイミングを均等にずらす */
.slideimg:nth-of-type(1){
	background-image: url('画像パス①'); /* 1枚目の画像を指定 */
	animation-delay: 0s; /* アニメーション開始を0秒遅延 */
}

.slideimg:nth-of-type(2) {
	background-image: url('画像パス②'); /* 2枚目の画像を指定 */
	animation-delay: 3s; /* アニメーション開始を3秒遅延 */
}

.slideimg:nth-of-type(3) {
	background-image: url('画像パス③'); /* 3枚目の画像を指定 */
	animation-delay: 6s; /* アニメーション開始を6秒遅延 */
}

.slideimg:nth-of-type(4) {
	background-image: url('画像パス④'); /* 4枚目の画像を指定 */
	animation-delay: 9s; /* アニメーション開始を9秒遅延 */
}

.slideimg:nth-of-type(5) {
	background-image: url('画像パス⑤'); /* 5枚目の画像を指定 */
	animation-delay: 12s; /* アニメーション開始を12秒遅延 */
}
  • background-image：それぞれの画像パスを設定します。
  • animation-delay: 画像が表示されるタイミングをずらして、次々に切り替わるようにします。

画像枚数やタイミングは調整できます

画像の枚数や、表示させたい秒数に合わせて調整してください。画像の枚数による、ちょうどよい切り替えタイミングの目安（％）はこれぐらいなら自然な動きになります。

画像２枚画像３枚画像４枚画像５枚
opacity: 0;0%, 75%, 100%0%, 63%, 100%0%, 40%, 100%0%, 30%, 100%
opacity: 1;25%, 50%20%, 33%15%, 25% 10%, 20%
/* アニメーションの進行 */
@keyframes slideAnime {
  /* アニメーション開始から0秒 */
  0% { opacity : 0; } /* 非表示 */

/* アニメーション開始から25%(10秒設定の場合は2.5秒) */
  25% { opacity : 1; }  /* 表示する */
  50% { opacity : 1; }
  75% { opacity : 0; }
  /* アニメーション開始から100%(10秒設定の場合は10秒) */
  100% { opacity : 0; }
}

ここはふわっとなるように、お好みでいろいろ試すとおもしろいかも。

タイミングに決まりはありませんが、あまりに適当な数字を入れると変な動きになってしまいます。いくつかのパターンを掲載するので、よさそうと思ったらそのまま使ってください。

  1. 3枚の画像を3秒ごとに切り替える（１周9秒）
  2. 4枚の画像を3秒ごとに切り替える（１周12秒）
  3. 5枚の画像を2秒ごとに切り替える（１周10秒）
  4. 5枚の画像を3秒ごとに切り替える（１周15秒）
アニメーション部分のみ抜粋します

3枚の画像を3秒ごとに切り替える（１周9秒）

スライド１
スライド２
スライド３
.slideimg {
	animation: slideAnime 9s infinite; /* 9秒で1サイクル */
}

@keyframes slideAnime {
	0%, 63%, 100% { opacity: 0; }/* スライドの非表示タイミング */
	20%, 33% { opacity: 1; }/* スライドの表示タイミング */
}

/* 各スライドのアニメーションタイミングを均等にずらす */
.slideimg:nth-of-type(1) {animation-delay: 0s;}
.slideimg:nth-of-type(2) {animation-delay: 3s;}
.slideimg:nth-of-type(3) {animation-delay: 6s;}

4枚の画像を3秒ごとに切り替える（１周12秒）

スライド１
スライド２
スライド３
スライド４
.slideimg {
	animation: slideAnime 12s infinite; /* 12秒で1サイクル */
}

@keyframes slideAnime {
	0%, 40%, 100% { opacity: 0; }/* スライドの非表示タイミング */
	15%, 25% { opacity: 1; }/* スライドの表示タイミング */
}

/* 各スライドのアニメーションタイミングを均等にずらす */
.slideimg:nth-of-type(1) {animation-delay: 0s;}
.slideimg:nth-of-type(2) {animation-delay: 3s;}
.slideimg:nth-of-type(3) {animation-delay: 6s;}
.slideimg:nth-of-type(4) {animation-delay: 9s;}

5枚の画像を2秒ごとに切り替える（１周10秒）

スライド１
スライド２
スライド３
スライド４
スライド５
.slideimg {
	animation: slideAnime 10s infinite; /* 10秒で1サイクル */
}

@keyframes slideAnime {
	0%, 30%, 100% { opacity: 0; }/* スライドの非表示タイミング */
	10%, 20% { opacity: 1; }/* スライドの表示タイミング */
}

/* 各スライドのアニメーションタイミングを均等にずらす */
.slideimg:nth-of-type(1) {animation-delay: 0s;}
.slideimg:nth-of-type(2) {animation-delay: 2s;}
.slideimg:nth-of-type(3) {animation-delay: 4s;}
.slideimg:nth-of-type(4) {animation-delay: 6s;}
.slideimg:nth-of-type(5) {animation-delay: 8s;}

5枚の画像を3秒ごとに切り替える（１周15秒）

スライド１
スライド２
スライド３
スライド４
スライド５
.slideimg {
	animation: slideAnime 15s infinite; /* 15秒で1サイクル */
}

@keyframes slideAnime {
	0%, 30%, 100% { opacity: 0; }/* スライドの非表示タイミング */
	10%, 20% { opacity: 1; }/* スライドの表示タイミング */
}

/* 各スライドのアニメーションタイミングを均等にずらす */
.slideimg:nth-of-type(1) {animation-delay: 0s;}
.slideimg:nth-of-type(2) {animation-delay: 3s;}
.slideimg:nth-of-type(3) {animation-delay: 6s;}
.slideimg:nth-of-type(4) {animation-delay: 9s;}
.slideimg:nth-of-type(5) {animation-delay: 12s;}
スポンサーリンク
目次に戻る

トップページのメインビジュアルとして使うには？

固定ページで作るトップページに、メインビジュアルとして複数画像切り替えスライダーを実装するにはいくつか工夫が必要です。

  1. 画像をフルワイドにする
    • 左右の余白をなくし画像を画面幅いっぱいに広げる
    • 不要な要素を非表示にする（アイキャッチやSNSボタン）
    • 不要な余白を消す（綺麗に表示するため）
  2. コンテンツを画像中央に固定配置する

フルワイドにする

幅と高さを画面いっぱいに広げます。

     

実装方法をこちらの記事で有料公開しています。

記事の内容
  • 要素を幅いっぱいに広げる方法
  • トップページに不要な要素を非表示にする方法（アイキャッチやSNSボタンなど）
  • トップページに不要な余白を消す方法
Cocoonでフルワイド！画面いっぱいに幅を広げる＋セクション背景色をつける方法
当記事について 実装手順→解説の順で有料公開しています。コンテンツを見る 当記事のカスタマイズを反映したデモページはこちら トップページカスタマイズと組み合わせできます 「カラム」ブロックを使ったフルワイドブロックの作り方を追加しました 固...
turicco.com

具体的には、以下のようにスライダーコンテナにfull-wideクラスを追加し、フルワイドにするCSSを追加するだけです。

半角スペースを空けて full-wide を追加します
<div class="slider-container full-wide">
    <div class="slideimg"></div>
    <div class="slideimg"></div>
    <div class="slideimg"></div>
    <div class="slideimg"></div>
    <div class="slideimg"></div>
</div>

コンテンツを中央に配置する

すべての画像の中央にコンテンツを表示します。

ロゴ（画像）、サイト名、メッセージエリア等を、すべての画像中央に固定して表示する場合にご利用ください。

     

HTMLの設定

<div class="slider-container">
    <div class="slideimg"></div>
    <div class="slideimg"></div>
    <div class="slideimg"></div>
    <div class="slideimg"></div>
    <div class="slideimg"></div>

    <div class="top-content">
     <div>トップページに表示するコンテンツをここに入力</div>
    </div>
</div>

CSSの設定

/* コンテンツのスタイル設定 */
.top-content {
	position: absolute; /* 絶対位置指定 */
	top: 50%; /* 上から50%の位置 */
	left: 50%; /* 左から50%の位置 */
	transform: translate(-50%, -50%); /* 中央に配置（位置を中央に調整） */
	color: white; /* テキストの色を白に設定 */
	text-align: center; /* テキストを中央揃えにする */
	z-index: 10; /* スライドの上に表示させるための重なり順序 */
	width: 100%; /* 最大幅を100%に設定（画面幅いっぱいに広げる） */
}

.top-content クラス

このCSSコードは、コンテンツを上下左右中央に表示するためのスタイルを設定しています。以下に、それぞれの部分について解説します。

  • position: absolute;
    • このプロパティは、要素の位置を絶対位置に設定します。親要素に対して相対的に位置を決定します。
  • top: 50%; left: 50%;:
    • 要素を親要素の中央に配置するため、上端と左端をそれぞれ50%に設定しています。
  • transform: translate(-50%, -50%);:
    • 要素を自身のサイズの半分だけ左と上に移動させることで、実際に中央に表示されるようにします。
  • color: white;:
    • テキストの色を白に設定します。必要に応じて変更してください。
  • text-align: center;
    • テキストを中央揃えにします。
  • z-index: 10;
    • このプロパティは、要素の重なり順を設定します。値が大きいほど前面に表示されます。ここでは、スライドの上に表示されるように設定されています。
スポンサーリンク
目次に戻る

まとめ

CSSだけで複数の画像を切り替えるアニメーションを作る方法を紹介しました。CSSの基本的な知識があれば誰でも簡単に導入できるので、ぜひ試してみてください。

CSSアニメーションの基本的な指定方法についてはこちらの記事にまとめました。

サイトに「動き」をつけるCSSアニメーション／基本的な指定方法を覚えよう
この記事では、CSSアニメーションの基本的な指定方法やプロパティの使い方について解説します。 サイトに「動き」といえばJavascriptが必要？というイメージがあるかもしれませんが、アニメーションを使うことでCSSでもウェブページに動きを...
turicco.com
目次に戻る
シェアはこちらから
はっちゃんをフォローする
スポンサーリンク
＼記事がお役に立てたら／

お買い物の際にぽちっとお願いします

Amazon

楽天市場

Yahoo!ショッピング

Profile
はっちゃん
はっちゃん

40代、小中学生の息子の母。
当サイトで使っているワードプレステーマCocoonのデザインカスタマイズ、ブログ運営のことを主に発信しています。

MORE
PVアクセスランキング にほんブログ村
はっちゃんをフォローする
Turicco

Comment コメントはこちらへ

タイトルとURLをコピーしました