Tabs Responsiveでテキストをアニメーション表示
Webサイトでは、あらゆるところでアニメーションが使用されています。今回は、以前BLOGで紹介した「Tabs Responsive」で、項目を切り替えると、テキストがフェードイン表示するタブを作成します。
今回のDEMOは、発送の情報をまとめたタブです。プラグインの名前の通り、全てレスポンシブ対応になっています。
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 Title | NO |
| Display Option For Title and icon | Show Tabs Title + Icon (both) |
| Tabs Icon Position Alignment | Before Tab Title |
| Font Style/Family | Theme Default Style |
| Tabs Position | Left |
| Margin Between Two Tabs | NO |
| Margin Between Tabs And Content | NO |
横並びタブ
タブを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 Border | NO |
| Tabs Styles | Default |
| 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 Size | 14 |
| Tabs Description Font Size | 16 |
| Tabs Description Animation | Fade in Up Animation |
| Tabs Alignment | Horizontal |
| Tabs Mobile display Settings | Display Both Title + Icon |
| Title Display Mode In Mobile | Display 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 Border | YES |
| Tabs Styles | Default |
| 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 Size | 14 |
| Tabs Description Font Size | 16 |
| Tabs Description Animation | Fade in Down Animation |
| Tabs Alignment | Vertical |
| Tabs Mobile display Settings | Display Only Title |
| Title Display Mode In Mobile | Display 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 Border | NO |
| Tabs Styles | Default |
| 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 Size | 18 |
| Tabs Description Font Size | 16 |
| Tabs Description Animation | Fade in Left Animation |
| Tabs Alignment | Horizontal |
| Tabs Mobile display Settings | Display Both Title + Icon |
| Title Display Mode In Mobile | Display As A vertical Button |
以上で、今回の説明は、終了です。ちょっとしたアニメーションですが、設定が簡単なので便利ですね。動きもスムーズなので使いやすいです。Webサイト作成のご依頼は、コンタクトフォームよりよろしくお願いします。
