![](https://cxg-design.jp/wp-content/uploads/2024/02/93655a4b564f4b99c0a531633df65304-1.png)
立体的なアニメーション付カルーセルをSmart Slider 3 Proで作成
前回のBLOGでは、Smart Slider 3 Proで、カルーセルを作成しました。今回は応用編で、ショーケースのアニメーション設定で、立体的なアニメーション付カルーセルを作成します。
![](https://cxg-design.jp/wp-content/uploads/2024/02/968b10ecd7cd11866d83b9d3d16dbeb1.png)
出典 : Smart Slider3
一つ目は、横長バナーの奥行きのあるカルーセル。2つ目は、縦長バナーの立体的なカルーセル。3つ目は縦スクロールの立体的なカルーセルです。全て5つの画像をスライド表示させています。
横長バナー
![](https://cxg-design.jp/wp-content/uploads/2024/02/93655a4b564f4b99c0a531633df65304.png)
奥行きのある、16 : 9バナーのカルーセルです。主にメインスライダーの下などに入れる小さめのカルーセルです。前後のバナーが、縮小&透過しています。PCではバナー間にスペースがありますが、SPでは、重なって表示されます。
Smart Slider>New Project>スライダー>ショーケースを選択し、作成ボタンをクリックします。
一般設定
![](https://cxg-design.jp/wp-content/uploads/2024/02/5ab66b557fb3e7ac85e72d32f9b18f08.png)
モバイルの左右にスペースを80px作り、前後のバナーが見えるようにします。
項目 | 設定値 |
---|---|
Side Spacing | デスクトップ : OFF タブレット : OFF モバイル : ON / 0px 80px 0px 80px |
Size
![](https://cxg-design.jp/wp-content/uploads/2024/02/8fb263bec390261344b897a320138035.png)
スライダーサイズは、横1400px、高さ338pxに設定します。Slide Sizeは、Slide Width600px、Slide Height338px、Slide Distance-30pxに設定しました。Slide Sizeは、バナーのサイズで、16 : 9となるように設定しました。スライダーサイズの高さは、Slide Heightと同じ値にしています。Slide Distanceを-30pxに設定することで、アニメーション設定時にできる、バナー間隔を詰めることができます。
レイアウトは、Boxedにチェックして、DownscaleのみONにします。Min Heightは0pxにします。
項目 | 設定値 |
---|---|
スライダーサイズ | 幅 : 1400px 高さ : 338px |
Slide Size | Slide Width : 600px Slide Height : 338px Slide Distance : -30px |
レイアウト | Boxed |
Downscale | ON |
Upscale | OFF |
Min Height | 0px |
操作
![](https://cxg-design.jp/wp-content/uploads/2024/02/baa80ecb174f8a045300f88bf7595707.png)
PCのみカーソルを合わせると、矢印が表示されるようにします。ページコントロールは、スライダーの下に設定するため、PositionをOuter 下 +10pxに設定しました。主な設定値は以下の通りです。
項目 | 設定値 |
---|---|
矢印 | チェック有 |
前の位置 | Middle 左 +15px |
次の位置 | Middle 右 +15px |
Image Width – Desktop | 30px |
ホバー時の表示 | ON / デスクトップ |
ページコントロール | チェック有 |
Position | Outer 下 +10px |
アニメーション
![](https://cxg-design.jp/wp-content/uploads/2024/02/b5233aa563982a7087c01e008a50a0e6-1.png)
アニメーションの設定で、奥行きのあるアニメーションにします。前後のバナーを透過させるため、不透明度をBefore60%、After60%に設定します。前後のバナーを縮小させるため、ScaleをBefore80%、After80%に設定します。
項目 | 設定値 |
---|---|
プリセット | デフォルト |
Duration | 800 |
Easing | Quad Out |
方向 | 水平方向 |
不透明度 | ON Before : 60 有効 : 100 After : 60 |
Scale | ON Before : 80 有効 : 100 After : 80 |
自動再生
![](https://cxg-design.jp/wp-content/uploads/2024/02/d0df57956b168f068d15202dabd753e6.png)
自動再生にチェックを入れ、5秒で切り替わるように、Slide Durationを5000に設定します。
項目 | 設定値 |
---|---|
自動再生 | チェック有 |
Slide Duration | 5000 |
自動的に開始 | ON |
Infinite Loop | ON |
縦長バナー
![](https://cxg-design.jp/wp-content/uploads/2024/02/3d7d8dacc5e7d36a1d14276d9d9dc57e.png)
縦長のバナーの立体的カルーセルです。前後のバナーにパースをかけて奥行きを出しています。SPでは、3つのバナーが、重なって表示されます。
一般設定
![](https://cxg-design.jp/wp-content/uploads/2024/02/1e930af90850d74a33555b3a2180e5b5-1.png)
モバイルの左右にスペースを80px作り、前後のバナーが見えるようにします。
項目 | 設定値 |
---|---|
Side Spacing | デスクトップ : OFF タブレット: OFF モバイル : ON / 80px 0px 80px 0px |
Size
![](https://cxg-design.jp/wp-content/uploads/2024/02/b30d7747692f89948dc1a4b887c7d47b-1.png)
バナー間にスペースを詰めるため、「Slide Distance」を-40pxに設定します。
項目 | 設定値 |
---|---|
スライダーサイズ | 幅 : 600px 高さ : 750px |
Slide Size | Slide Width : 600px Slide Height : 750px Slide Distance : -40px |
レイアウト | Boxed |
Downscale | ON |
Upscale | OFF |
Min Height | 0px |
操作
![](https://cxg-design.jp/wp-content/uploads/2024/02/a2f038da9e2a3b29e2a614b7d9ce48e9.png)
基本的に横長バナーと同じですが、ページコントロールを外しました。
項目 | 設定値 |
---|---|
矢印 | チェック有 |
前の位置 | Middle 左 +15px |
次の位置 | Middle 右 +15px |
Image Width – Desktop | 30px |
ホバー時の表示 | ON / デスクトップ |
ページコントロール | チェック無 |
アニメーション
![](https://cxg-design.jp/wp-content/uploads/2024/02/c7cc8db96b39fb636324ca6f1724cd91-1.png)
立体的なアニメーションにするため、前後のバナー設定を変更します。まず、透過させるため、不透明度をBefore60%、After60%に設定します。次に、縮小させるため、ScaleをBefore80%、After80%に設定します。最後に、パースをかけるため、Rotate YをBefore30°、After-30°に設定します。
項目 | 設定値 |
---|---|
プリセット | デフォルト |
Duration | 800 |
Easing | Quad Out |
方向 | 水平方向 |
不透明度 | ON Before : 60 有効 : 100 After : 60 |
Scale | ON Before : 80 有効 : 100 After : 80 |
Rotate Y | ON Before : 30 有効 : 0 After : -30 |
スライド
![](https://cxg-design.jp/wp-content/uploads/2024/02/4d792b5e98ac6bd3ad63c6a5fff8bc35.png)
バナーを角丸にするためにSlide Design>Slide Border Radiusを10pxに設定します。
項目 | 設定値 |
---|---|
Side Border Radius | 10px |
縦スライド
![](https://cxg-design.jp/wp-content/uploads/2024/02/2cc5554dce7abf752dd611c7e024c3b8.png)
最後は、縦スライドの立体的カルーセルです。前後のバナーを縮小し、パースをかけることにより、有効バナーが浮き出ているように設定します。SPでは、バナーが重なって表示されます。
横スライドと違い、フリックしにくいので、下にサムネイルを表示しました。ブロックエディターでカラムの横幅をカルーセルのサイズに合わせて600pxに固定しています。これによって、サムネイルが多くなったりしても、矢印が現れ、横スライドで表示することができます。
Size
![](https://cxg-design.jp/wp-content/uploads/2024/02/69df284660d40bb3abce1e407aad0beb.png)
高さは、サムネイルが下に入るので、750pxにして、SPでも全て表示されるように設定します。
項目 | 設定値 |
---|---|
スライダーサイズ | 縦 : 600px 高さ : 750px |
Slide Size | Slide Width : 600px Slide Height : 750px Slide Distance : 15px |
レイアウト | Boxed |
Downscale | ON |
Upscale | OFF |
Min Height | 0px |
操作
![](https://cxg-design.jp/wp-content/uploads/2024/02/0a4ed84aeaed61a6545c254359c6510b.png)
サムネイルにチェックを入れ、キャプションなしのテンプレートを選択します。サムネイルを中央揃えにするため「サムネイルの整列」を中央にします。
項目 | 設定値 |
---|---|
矢印 | チェック無 |
サムネイル | チェック有 |
画像 | チェック有 / 100px / 60px |
Position | Outer 下 |
サムネイルの整列 | 中央 |
ページコントロール | チェック無 |
アニメーション
![](https://cxg-design.jp/wp-content/uploads/2024/02/851282b8622ec24a49c2bf9dde312669.png)
立体的なアニメーションにするため、前後のバナー設定を変更します。まず、透過させるため、不透明度をBefore60%、After60%に設定します。次に、縮小させるため、ScaleをBefore80%、After80%に設定します。最後に、パースをかけるため、Rotate XをBefore30°、After-30°に設定します。
項目 | 設定値 |
---|---|
プリセット | デフォルト |
Duration | 800 |
Easing | Quad Out |
方向 | 垂直方向 |
不透明度 | ON Before : 60 有効 : 100 After : 60 |
Scale | ON Before : 80 有効 : 100 After : 80 |
Rotate X | ON Before : 30 有効 : 0 After : -30 |
自動再生
![](https://cxg-design.jp/wp-content/uploads/2024/02/2f69cf3e1ed5788637825494ee111d89.png)
サムネイルや、前後のバナーをクリックしたら、自動再生が停止する設定にするため、「Stop On Click」をONにします。
項目 | 設定値 |
---|---|
自動再生 | チェック有 |
Slide Duration | 5000 |
自動的に開始 | ON |
Infinite Loop | ON |
Stop On Click | ON |
以上で立体的なアニメーション付カルーセル作成の説明は、終了です。アニメーションが追加されるだけで、印象が変わりますね。インパクトのあるカルーセルを作成したいときにオススメです。Smart Slider 3 Proでは、このような細かい設定が簡単にできます。webサイト作成のご依頼はメールフォームよりよろしくお願いします。