Tabs Responsiveでテキストをアニメーション表示

  • Plugin

    • Webサイトでは、あらゆるところでアニメーションが使用されています。今回は、以前BLOGで紹介した「Tabs Responsive」で、項目を切り替えると、テキストがフェードイン表示するタブを作成します。

     出典 : Tabs  Responsive

    今回のDEMOは、発送の情報をまとめたタブです。プラグインの名前の通り、全てレスポンシブ対応になっています。

    TAB ANIMATION

    TAB

    1カラムの下に、カバーを上配置で、中に3カラムを配置し、中央にタブのショートコードブロックを入れています。PCでは、幅70%、SPでは全幅になるように設定します。

    カバーの配置を上中央にします。

    3カラムの中央を幅70%に設定

    基本操作

    改めて、基本操作を簡単に説明します。左サイドバーのTabs Responsive＞Add New Tabsをクリックし、新しいタブを作成します。タイトルを入力し、Add Tabs内のTab Title（項目）、Tab Description（内容）を入力し、Tab Iconからアイコンを選択します。右サイドバーの設定項目からスタイルを変更し、右上の「公開」ボタンをクリックし保存します。Tabs Responsive＞All Tabsのショートコードをコピーし、表示させたい場所に設置します。

    タイトル、Add Tabs内を入力し、公開ボタンをクリック。

    Tabs Responsive＞All Tabsのショートコードを表示させたい場所に設置

    共通設定

    まず、今回のDEMO全ての共通設定項目です。タブ項目にアイコンを表示するので、「Display Option For Title and icon」を「Show Tabs Title + Icon (both)」に設定します。文字スタイルは、Webサイトで使用しているフォントを使用するので「Font Style/Family」を「Theme Default Style」に設定します。タブの場所は、左側に設定するので、「Tabs Position」を「Left」にします。

    項目設定値
    Display Tabs Section TitleNO
    Display Option For Title and iconShow Tabs Title + Icon (both)
    Tabs Icon Position AlignmentBefore Tab Title
    Font Style/FamilyTheme Default Style
    Tabs PositionLeft
    Margin Between Two TabsNO
    Margin Between Tabs And ContentNO

    横並びタブ

    タブをSPでも上に横並びで表示するため、「Title Display Mode In Mobile」を「Display As a tabs」に設定しています。タブの文字数が多くなければ、SPでも一列で表示されます。「Tabs Description Animation」を「Fade in Up Animation」に設定することで、タブが変更されると、テキストが下からフェードインします。

    「Tabs Description Animation」を「Fade in Up Animation」に設定

    「Title Display Mode In Mobile」を「Display As a tabs」に設定

    項目設定値
    Display Tabs BorderNO
    Tabs StylesDefault
    Tabs Title Background Colour濃いグレー
    Tabs Title/Icon Font Colour白
    Selected Tabs Title Background Colour白
    Selected Tabs Title/Icon Font Colour黒
    Tabs Description Background Colour白
    Tabs Description Font Colour黒
    Tabs Title/Icon Font Size14
    Tabs Description Font Size16
    Tabs Description AnimationFade in Up Animation
    Tabs AlignmentHorizontal
    Tabs Mobile display SettingsDisplay Both Title + Icon
    Title Display Mode In MobileDisplay As a tabs

    縦並びタブ

    タブを左に、縦並びで固定するため「Tabs Alignment」を「Vertical」に設定しています。テキストは、上からフェードインするよう「Tabs Mobile display Settings」を「Fade in Down Animation」に設定しています。SPでは、幅が狭まり、テキストの改行が多くなるため、「Tabs Mobile display Settings」を「Display Only Title」にして、アイコンを外します。

    「Tabs Description Animation」を「Display As a tabs」に設定

    「Tabs Mobile display Settings」を「Fade in Down Animation」に、「Tabs Alignment」を「Vertical」に設定

    項目設定値
    Display Tabs BorderYES
    Tabs StylesDefault
    Tabs Title Background Colour白
    Tabs Title/Icon Font Colour黒
    Selected Tabs Title Background Colour黒
    Selected Tabs Title/Icon Font Colour白
    Tabs Description Background Colour黒
    Tabs Description Font Colour白
    Tabs Title/Icon Font Size14
    Tabs Description Font Size16
    Tabs Description AnimationFade in Down Animation
    Tabs AlignmentVertical
    Tabs Mobile display SettingsDisplay Only Title
    Title Display Mode In MobileDisplay As a tabs

    SP全幅タブ

    SPでは、タブのボタンが全幅、縦並びになるように「Title Display Mode In Mobile」を「Display As A vertical Button」に設定しています。幅が広がる分、タブタイトルのフォントサイズを大きく設定しています。SPでは、タブと内容が離れる場合があるので、紛らわしくならないよう、色分けをしっかりしています。テキストは、左からフェードインするよう「Tabs Description Animation」を「Fade in Left Animation」に設定しています。

    「Tabs Description Animation」を「Fade in Left Animation」に設定

    「Title Display Mode In Mobile」を「Display As A vertical Button」に設定

    項目設定値
    Display Tabs BorderNO
    Tabs StylesDefault
    Tabs Title Background Colour赤
    Tabs Title/Icon Font Colour黒
    Selected Tabs Title Background Colour白
    Selected Tabs Title/Icon Font Colour黒
    Tabs Description Background Colour白
    Tabs Description Font Colour黒
    Tabs Title/Icon Font Size18
    Tabs Description Font Size16
    Tabs Description AnimationFade in Left Animation
    Tabs AlignmentHorizontal
    Tabs Mobile display SettingsDisplay Both Title + Icon
    Title Display Mode In MobileDisplay As A vertical Button

    以上で、今回の説明は、終了です。ちょっとしたアニメーションですが、設定が簡単なので便利ですね。動きもスムーズなので使いやすいです。Webサイト作成のご依頼は、コンタクトフォームよりよろしくお願いします。

    You may also like