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

  • Plugin

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

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

     出典 : Smart Slider3

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

    UNIQUE ANIMATION SLIDER

    SLIDER

    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にチェックを入れ、「適用」ボタンをクリック

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

    ジグザグスライダー

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

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

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

    Main Animationを「アニメーションなし」に設定

    Background Animation＞左端に固定にチェックを入れ、「適用」ボタンをクリック

    区切り＞下の「Type」を「Incline2」に、色は背景色に設定

    上も、下と同じ設定にして、「Frip」にチェック。

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

    ウェーブスライダー

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

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

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

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

    Main Animationをフェードに設定

    区切り＞下の「Type」を「波」に、色は背景色に、AnimateをONに設定。

    パーティクルエフェクト＞効果をスパークリングに設定

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

    アニメーションの不具合

    Smart Slider3 Proのアニメーション項目は、さまざまな設定があり、デザインに合わせて色々な組み合わせができます。しかし、組み合わせによっては、動きが不自然になります。実際のプレビューを確認しながら設定しましょう。また、読み込みが遅い場合は、スライド画像を小さくするなど調整しましょう。

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

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

    You may also like