Smart Slider3 Proのアニメーションでユニークなスライダーを作成

スライダーのアニメーションは、基本的にフェードかスライドですが、Smart Slider3 Proでは、いろいろなアニメーションが作成できます。また、上下を図形で切り取ったり、エフェクト効果を追加することができます。

今回は、Smart Slider3 Proで作成したユニークなスライダーをアニメーション機能に絞って紹介していきます。

今回のDEMOは、3種のスライダーを作成しました。

1つ目は、パララックススライダー、２つ目は、ジグザグスライダー、3つ目は、ウェーブスライダーです。全て全面スライダーで、PCのみ矢印を表示しています。

パララックススライダー

スライド前後のスライド速度が違うので、ズレが生じているように見えるスライダーです。これは、当サイトのトップメインスライイダーと同じ動きをしています。

Main Animationではなく、Background Animationでアニメーションを作成します。Main Animationを「アニメーションなし」に設定します。Background Animationをクリックすると、設定画面が表示されるので、「Parallax to left」にチェックを入れ、「適用」ボタンをクリックします。

次に、スライド後ズームアウトするアニメーションを設定します。Ken Burns Effectをクリックし、「Downscale」にチェックを入れ、「適用」ボタンをクリックします。

項目	設定値
Main Animation	アニメーションなし
Background Animation	Parallax to left
Ken Burns Effect	Downscale

ジグザグスライダー

スライダーの上下に、背景と同じ色の図形を設定しています。また、スライダーは前のバナーが固定で、後のバナーのみスライドするアニメーションにしています。アニメーションは、Background Animationで作成するので、Main Animationを「アニメーションなし」に設定します。

固定スライダーを作成するため、Background Animation＞左端に固定にチェックを入れ、「適用」ボタンをクリックします。

上下にジグザグにするため、区切り＞下の「Type」を「Incline2」に設定します。色は背景色に合わせます。次に、右上の「上」ボタンをクリックし、スライダー上の区切りを設定します。下と同じTypeと色を設定し、反転するため、「Frip」にチェックを入れます。

項目	設定値
Main Animation	アニメーションなし
Background Animation	左端に固定
区切り	Incline2

ウェーブスライダー

スライダーの下に波のアニメーションを設定します。また、水泡が浮上しているようなエフェクトをスライダーの上に設定しています。

まず、Main Animationをフェードに設定します。

スライダー下にウェーブを入れるため、区切り＞Typeを波に設定します。色を背景色に設定し、アニメーションをつけるため、AnimateをONにします。「適用」ボタンをクリックし、保存します。

水泡のエフェクトを付けるため、パーティクルエフェクトをクリックし、効果をスパークリングに設定します。速度、Number of Particlesなどを調整し、「適用」ボタンをクリックします。

項目	設定値
Main Animation	フェード
区切り	波
パーティクルエフェクト	効果 : スパークリング 速度 : 3 Number of Particles : 10

以上で今回の説明は終了です。今回紹介したアニメーションは一部で、他にも色々な設定があります。組み合わせを色々試すのも楽しいプラグインです。Pro版では、全面設定も簡単なので、Webサイト作成時インストールすると大変便利です。

Webサイト作成のご依頼は、コンタクトフォームよりよろしくお願いします。