STUDIOのカルーセルを使って自動で画像がループするアニメーションの作り方をご案内します。

カルーセルを使えば、簡単にフェード（フェードイン・フェードアウト）で自動再生させることができます。

今回ご案内するのは、以下のサンプルのようにファーストビューで画像がフワー、フワーっと切り替わっていくクロスフェードのスライドです。

STUDIOでの実装サンプル

%3Cvideo%20autoplay%3D%22%22%20muted%3D%22%22%20playsinline%3D%22%22%20loop%3D%22%22%3E%0A%20%20%3Csource%20src%3D%22https%3A%2F%2Ffile.galera.co.jp%2Fvideo%2F09241358-2.mp4%22%20type%3D%22video%2Fmp4%22%3E%0A%3C%2Fvideo%3E

STUDIOのカルーセルを使っているので、無限ループになります。

上のサンプルは「ゆっくり拡大する動き（ズームイン）」ですが、「ゆっくり縮小する動き（ズームアウト）」も可能です。

ちなみに、呼び方は「クロスフェード」と言ったり、ほかにも「フェードイン・フェードアウトのアニメーション」「無限ループのスライド」「フワー、フワーってするアニメーション」などいろいろです。

メインビジュアルの写真が左右にスライドして切り替わっていくアニメーションだと、少しインパクトが強めになる場合もあります。

その点、フワーっと切り替わっていくクロスフェードのスライダーはクセが強くないので、いろんなサイトに使いやすく見た目もリッチになりやすいです。

カルーセルを使ったクロスフェード

STUDIOの標準機能のカルーセルを使用して、自動で画像がループし続けるフェードのアニメーションを作成していきます。

①カルーセルの準備

まずは、画面左の「追加」からボックスの中にあるカルーセル（Carousel）を選択してメインビジュアル部分に置きます。

次に、不要な要素（テキストなど）を削除して画像だけを残します。
↓こんな感じです。

※オレンジの矢印部分のように、画像は「img」ではなく「Box」になっている必要があります。

②画像の要素をグループ化する

画像をdivで囲むために『グループ化』をします。

%3Cvideo%20autoplay%3D%22%22%20muted%3D%22%22%20playsinline%3D%22%22%20loop%3D%22%22%3E%0A%20%20%3Csource%20src%3D%22https%3A%2F%2Ffile.galera.co.jp%2Fvideo%2F09241502.mp4%22%20type%3D%22video%2Fmp4%22%3E%0A%3C%2Fvideo%3E

カルーセルのitem（緑色のdiv）の中にdivが2つできたと思います。

これで準備ができたので、ここから各要素の設定を行っていきます。

③カルーセル全体のdiv（親要素）の設定

カルーセル全体のdiv（親要素）の設定から進めていきます。

画面上部のボックスのタブで以下のように設定します。
※数値は自由です。

横幅： 100%
縦幅： 100vh

次に、画面右側の設定で以下のように設定します。

自動再生： ON
再生間隔： 3000
送り時間： 1
ホバーで停止： OFF

※STUDIOのカルーセル機能を使用したこの仕組みは、画像が切り替わる時に一瞬ピカッとする現象が起こりがちです。
『送り時間』を「0」ではなく「1」にすることで、その現象の発生回数を減らすことができます。（ピカッとする現象を完全になくせるわけではありません。）

【補足】一瞬ピカッとする現象について
フェードの画像が切り替わる時に一瞬ピカッとする現象は、サイトによってほとんど起きない場合と頻発する場合とがあります。

ほとんど起きない場合でも、ずっとループを眺め続けているとたまにピカッとする時があります。

この現象についていろいろ試してみたのですが、『同じページ内に複数のカルーセルを使用している場合』は特に起こりやすくなります。
また、情報量が多いページも少し起こりやすくなる印象があります。

ちなみに「一瞬ピカッとする」というのは、厳密には光っているわけではなく、ほんの一瞬、次の画像が表示されない瞬間が発生するため、それがピカッとしているように見える感じです。

カルーセルの画像も設定しておきます。

cover（画像）の項目だけ残して、それ以外の項目は削除でOKです。

%3Cvideo%20autoplay%3D%22%22%20muted%3D%22%22%20playsinline%3D%22%22%20loop%3D%22%22%3E%0A%20%20%3Csource%20src%3D%22https%3A%2F%2Ffile.galera.co.jp%2Fvideo%2F09241521.mp4%22%20type%3D%22video%2Fmp4%22%3E%0A%3C%2Fvideo%3E

cover（画像）をお好みの画像に差し替えたり追加してください。

④カルーセルのitemの設定

カルーセルのitem（緑色のdiv）を以下のように設定します。

配置：固定
横幅： 100%
縦幅： 100%

【補足】画像が表示される順番について
ちなみに、itemの配置を「固定」にすると、一番最初に表示される画像は以下のようになります。
・3枚までなら、1枚目の画像が最初に表示される
・4枚以上なら、4枚目の画像が最初に表示される

⑤itemの子要素のdivの設定

itemのすぐ下の階層にあるdivを設定します。

以下のように設定します。

横幅： 100%
縦幅： 100%

次に、出現時の「条件付きスタイル」を設定します。

条件付きスタイル：出現時
透明度： 0
イージング：linear
時間： 1000

この条件付きスタイルは、画像が切り替わる際にフワーっとフェードで表示するためのアニメーションになります。

⑥画像のdivの設定

一番下の階層にある画像のdivを設定します。

以下のように設定します。

横幅： 100%
縦幅： 100%
スケール： X 1.05、Y 1.05

※「スケール」はモーションのタブの中にあります。

【補足】画像をゆっくり縮小させる場合
上記のスケールの数値は、画像をゆっくり拡大（ズームイン）させる設定です。
ゆっくり縮小（ズームアウト）させる場合は、スケールのXとYを「1」にします。

次に、出現時の「条件付きスタイル」を設定します。

条件付きスタイル：出現時
イージング：linear
時間： 4000
スケール： X 1、Y 1

【補足】画像をゆっくり縮小させる場合
上記のスケールの数値は、画像をゆっくり拡大（ズームイン）させる設定です。
ゆっくり縮小（ズームアウト）させる場合は、スケールのXとYを「1.05」にします。

⑦完成

これで完成です。
STUDIOならメインビジュアルで画像をループさせる設定も簡単にできます。

上記「⑥画像のdivの設定」で触れましたが、画像をズームインにするか、またはズームアウトにするかはスケールの数値を変えるだけで設定できます。

この記事の最初でご紹介したサンプルはズームインのタイプでしたが、スケールの数値を変更してゆっくり縮小するように設定した場合は、下の動画の動きになります。

%3Cvideo%20autoplay%3D%22%22%20muted%3D%22%22%20playsinline%3D%22%22%20loop%3D%22%22%3E%0A%20%20%3Csource%20src%3D%22https%3A%2F%2Ffile.galera.co.jp%2Fvideo%2F09241638-2.mp4%22%20type%3D%22video%2Fmp4%22%3E%0A%3C%2Fvideo%3E

フェードの速さやアニメーションの時間などを変更するだけでもサイトの印象は大きく変わるので、いろいろ試してみると面白いと思います。STUDIO制作の参考になれば幸いです。

ホームページの制作会社を探されている方は、当社へお気軽にお問い合わせください。

当社はSTUDIOだけでなくWordPressの実績やノウハウも豊富ですので、WordPressと比較した場合のSTUDIOのメリットやデメリットなどもご案内可能です。

→ ホームページ制作のプランや料金はこちら