HOME > BLOG > 立体的なアニメーション付カルーセルをSmart Slider 3 Proで作成

立体的なアニメーション付カルーセルをSmart Slider 3 Proで作成

  • プラグイン
    •

    前回のBLOGでは、Smart Slider 3 Proで、カルーセルを作成しました。今回は応用編で、ショーケースのアニメーション設定で、立体的なアニメーション付カルーセルを作成します。

     出典 : Smart Slider3

    一つ目は、横長バナーの奥行きのあるカルーセル。2つ目は、縦長バナーの立体的なカルーセル。3つ目は縦スクロールの立体的なカルーセルです。全て5つの画像をスライド表示させています。

    ANIMATION CAROUSEL

    SLIDER

    横長バナー

    奥行きのある、16 : 9バナーのカルーセルです。主にメインスライダーの下などに入れる小さめのカルーセルです。前後のバナーが、縮小&透過しています。PCではバナー間にスペースがありますが、SPでは、重なって表示されます。

    Smart Slider＞New Project＞スライダー＞ショーケースを選択し、作成ボタンをクリックします。

    一般設定

    モバイルの左右にスペースを80px作り、前後のバナーが見えるようにします。

    項目設定値
    Side Spacingデスクトップ : OFF
    タブレット : OFF
    モバイル : ON / 0px 80px 0px 80px

    Size

    スライダーサイズは、横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 SizeSlide Width : 600px
    Slide Height : 338px
    Slide Distance : -30px
    レイアウトBoxed
    DownscaleON
    UpscaleOFF
    Min Height0px

    操作

    PCのみカーソルを合わせると、矢印が表示されるようにします。ページコントロールは、スライダーの下に設定するため、PositionをOuter 下 +10pxに設定しました。主な設定値は以下の通りです。

    項目設定値
    矢印チェック有
    前の位置Middle 左 +15px
    次の位置Middle 右 +15px
    Image Width – Desktop30px
    ホバー時の表示ON / デスクトップ
    ページコントロールチェック有
    PositionOuter 下 +10px

    アニメーション

    アニメーションの設定で、奥行きのあるアニメーションにします。前後のバナーを透過させるため、不透明度をBefore60%、After60%に設定します。前後のバナーを縮小させるため、ScaleをBefore80%、After80%に設定します。

    項目設定値
    プリセットデフォルト
    Duration800
    EasingQuad Out
    方向水平方向
    不透明度ON
    Before : 60
    有効 : 100
    After : 60
    ScaleON
    Before : 80
    有効 : 100
    After : 80

    自動再生

    自動再生にチェックを入れ、5秒で切り替わるように、Slide Durationを5000に設定します。

    項目設定値
    自動再生チェック有
    Slide Duration5000
    自動的に開始ON
    Infinite LoopON

    縦長バナー

    縦長のバナーの立体的カルーセルです。前後のバナーにパースをかけて奥行きを出しています。SPでは、3つのバナーが、重なって表示されます。

    一般設定

    モバイルの左右にスペースを80px作り、前後のバナーが見えるようにします。

    項目設定値
    Side Spacingデスクトップ : OFF
    タブレット: OFF
    モバイル : ON / 80px 0px 80px 0px

    Size

    バナー間にスペースを詰めるため、「Slide Distance」を-40pxに設定します。

    項目設定値
    スライダーサイズ幅 : 600px
    高さ : 750px
    Slide SizeSlide Width : 600px
    Slide Height : 750px
    Slide Distance : -40px
    レイアウトBoxed
    DownscaleON
    UpscaleOFF
    Min Height0px

    操作

    基本的に横長バナーと同じですが、ページコントロールを外しました。

    項目設定値
    矢印チェック有
    前の位置Middle 左 +15px
    次の位置Middle 右 +15px
    Image Width – Desktop30px
    ホバー時の表示ON / デスクトップ
    ページコントロールチェック無

    アニメーション

    立体的なアニメーションにするため、前後のバナー設定を変更します。まず、透過させるため、不透明度をBefore60%、After60%に設定します。次に、縮小させるため、ScaleをBefore80%、After80%に設定します。最後に、パースをかけるため、Rotate YをBefore30°、After-30°に設定します。

    項目設定値
    プリセットデフォルト
    Duration800
    EasingQuad Out
    方向水平方向
    不透明度ON
    Before : 60
    有効 : 100
    After : 60
    ScaleON
    Before : 80
    有効 : 100
    After : 80
    Rotate YON
    Before : 30
    有効 : 0
    After : -30

    スライド

    バナーを角丸にするためにSlide Design＞Slide Border Radiusを10pxに設定します。　

    項目設定値
    Side Border Radius10px

    縦スライド

    最後は、縦スライドの立体的カルーセルです。前後のバナーを縮小し、パースをかけることにより、有効バナーが浮き出ているように設定します。SPでは、バナーが重なって表示されます。

    横スライドと違い、フリックしにくいので、下にサムネイルを表示しました。ブロックエディターでカラムの横幅をカルーセルのサイズに合わせて600pxに固定しています。これによって、サムネイルが多くなったりしても、矢印が現れ、横スライドで表示することができます。

    Size

    高さは、サムネイルが下に入るので、750pxにして、SPでも全て表示されるように設定します。

    項目設定値
    スライダーサイズ縦 : 600px
    高さ : 750px
    Slide SizeSlide Width : 600px
    Slide Height : 750px
    Slide Distance : 15px
    レイアウトBoxed
    DownscaleON
    UpscaleOFF
    Min Height0px

    操作

    サムネイルにチェックを入れ、キャプションなしのテンプレートを選択します。サムネイルを中央揃えにするため「サムネイルの整列」を中央にします。

    項目設定値
    矢印チェック無
    サムネイルチェック有
    画像チェック有 / 100px / 60px
    PositionOuter 下
    サムネイルの整列中央
    ページコントロールチェック無

    アニメーション

    立体的なアニメーションにするため、前後のバナー設定を変更します。まず、透過させるため、不透明度をBefore60%、After60%に設定します。次に、縮小させるため、ScaleをBefore80%、After80%に設定します。最後に、パースをかけるため、Rotate XをBefore30°、After-30°に設定します。

    項目設定値
    プリセットデフォルト
    Duration800
    EasingQuad Out
    方向垂直方向
    不透明度ON
    Before : 60
    有効 : 100
    After : 60
    ScaleON
    Before : 80
    有効 : 100
    After : 80
    Rotate XON
    Before : 30
    有効 : 0
    After : -30

    自動再生

    サムネイルや、前後のバナーをクリックしたら、自動再生が停止する設定にするため、「Stop On Click」をONにします。

    項目設定値
    自動再生チェック有
    Slide Duration5000
    自動的に開始ON
    Infinite LoopON
    Stop On ClickON

    以上で立体的なアニメーション付カルーセル作成の説明は、終了です。アニメーションが追加されるだけで、印象が変わりますね。インパクトのあるカルーセルを作成したいときにオススメです。Smart Slider 3 Proでは、このような細かい設定が簡単にできます。webサイト作成のご依頼はメールフォームよりよろしくお願いします。

    RECOMMEND

    CONTACT

    Webサイト作成は、是非
    CXG DESIGNへご検討ください。