![](https://cxg-design.jp/wp-content/uploads/2024/04/4fa35a67cc834b5d48e5acb94c54489a.png)
Smart Slider3 Proのアニメーションでユニークなスライダーを作成
スライダーのアニメーションは、基本的にフェードかスライドですが、Smart Slider3 Proでは、いろいろなアニメーションが作成できます。また、上下を図形で切り取ったり、エフェクト効果を追加することができます。
今回は、Smart Slider3 Proで作成したユニークなスライダーをアニメーション機能に絞って紹介していきます。
![](https://cxg-design.jp/wp-content/uploads/2024/02/968b10ecd7cd11866d83b9d3d16dbeb1.png)
出典 : Smart Slider3
今回のDEMOは、3種のスライダーを作成しました。
1つ目は、パララックススライダー、2つ目は、ジグザグスライダー、3つ目は、ウェーブスライダーです。全て全面スライダーで、PCのみ矢印を表示しています。
パララックススライダー
![](https://cxg-design.jp/wp-content/uploads/2024/04/4fa35a67cc834b5d48e5acb94c54489a.png)
スライド前後のスライド速度が違うので、ズレが生じているように見えるスライダーです。これは、当サイトのトップメインスライイダーと同じ動きをしています。
Main Animationではなく、Background Animationでアニメーションを作成します。Main Animationを「アニメーションなし」に設定します。Background Animationをクリックすると、設定画面が表示されるので、「Parallax to left」にチェックを入れ、「適用」ボタンをクリックします。
次に、スライド後ズームアウトするアニメーションを設定します。Ken Burns Effectをクリックし、「Downscale」にチェックを入れ、「適用」ボタンをクリックします。
![](https://cxg-design.jp/wp-content/uploads/2024/04/573026715284e0f7bc0262a6f4974f45.png)
Main Animationを「アニメーションなし」に設定
![](https://cxg-design.jp/wp-content/uploads/2024/04/60d4d7b558da7f93eeb20a08e94cbdc9.png)
Background Animation>Parallax to leftにチェックを入れ、「適用」ボタンをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/04/f7ff04025f5919d4d3eba892651a73d6.png)
Ken Burns Effect>Downscaleにチェックを入れ、「適用」ボタンをクリック
項目 | 設定値 |
---|---|
Main Animation | アニメーションなし |
Background Animation | Parallax to left |
Ken Burns Effect | Downscale |
ジグザグスライダー
![](https://cxg-design.jp/wp-content/uploads/2024/04/049d52255c58765db62eb1142b6c80d9-1.png)
スライダーの上下に、背景と同じ色の図形を設定しています。また、スライダーは前のバナーが固定で、後のバナーのみスライドするアニメーションにしています。アニメーションは、Background Animationで作成するので、Main Animationを「アニメーションなし」に設定します。
固定スライダーを作成するため、Background Animation>左端に固定にチェックを入れ、「適用」ボタンをクリックします。
上下にジグザグにするため、区切り>下の「Type」を「Incline2」に設定します。色は背景色に合わせます。次に、右上の「上」ボタンをクリックし、スライダー上の区切りを設定します。下と同じTypeと色を設定し、反転するため、「Frip」にチェックを入れます。
![](https://cxg-design.jp/wp-content/uploads/2024/04/2fbd3b2e5a9a10b93a3c83744a4b4cb7.png)
Main Animationを「アニメーションなし」に設定
![](https://cxg-design.jp/wp-content/uploads/2024/04/c1a4fc274efdb532fba734f166204bba.png)
Background Animation>左端に固定にチェックを入れ、「適用」ボタンをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/04/0b26fd0ffdf605638f357b0169da2d0b.png)
区切り>下の「Type」を「Incline2」に、色は背景色に設定
![](https://cxg-design.jp/wp-content/uploads/2024/04/91039bc326fdc27bcadeb5dfdfe8fc4b.png)
上も、下と同じ設定にして、「Frip」にチェック。
項目 | 設定値 |
---|---|
Main Animation | アニメーションなし |
Background Animation | 左端に固定 |
区切り | Incline2 |
ウェーブスライダー
![](https://cxg-design.jp/wp-content/uploads/2024/04/f96d4fcf89d03e95d4049359cacb8f1f-1.png)
スライダーの下に波のアニメーションを設定します。また、水泡が浮上しているようなエフェクトをスライダーの上に設定しています。
まず、Main Animationをフェードに設定します。
スライダー下にウェーブを入れるため、区切り>Typeを波に設定します。色を背景色に設定し、アニメーションをつけるため、AnimateをONにします。「適用」ボタンをクリックし、保存します。
水泡のエフェクトを付けるため、パーティクルエフェクトをクリックし、効果をスパークリングに設定します。速度、Number of Particlesなどを調整し、「適用」ボタンをクリックします。
![](https://cxg-design.jp/wp-content/uploads/2024/04/ec9a3bb0fe98d0e62ec0a4adc30fa7d8.png)
Main Animationをフェードに設定
![](https://cxg-design.jp/wp-content/uploads/2024/04/3fd3015b977e03191811ff0aab5803e2.png)
区切り>下の「Type」を「波」に、色は背景色に、AnimateをONに設定。
![](https://cxg-design.jp/wp-content/uploads/2024/04/b320665c8443eacb7aa1b7cb7b2548f6.png)
パーティクルエフェクト>効果をスパークリングに設定
項目 | 設定値 |
---|---|
Main Animation | フェード |
区切り | 波 |
パーティクルエフェクト | 効果 : スパークリング 速度 : 3 Number of Particles : 10 |
アニメーションの不具合
Smart Slider3 Proのアニメーション項目は、さまざまな設定があり、デザインに合わせて色々な組み合わせができます。しかし、組み合わせによっては、動きが不自然になります。実際のプレビューを確認しながら設定しましょう。また、読み込みが遅い場合は、スライド画像を小さくするなど調整しましょう。
以上で今回の説明は終了です。今回紹介したアニメーションは一部で、他にも色々な設定があります。組み合わせを色々試すのも楽しいプラグインです。Pro版では、全面設定も簡単なので、Webサイト作成時インストールすると大変便利です。
Webサイト作成のご依頼は、コンタクトフォームよりよろしくお願いします。