タブをクリックしたときに、表示中の内容をフェードアウトさせてから、次の内容をフェードインさせる方法を紹介します。瞬時に表示を切り替えるのではなく、内容がゆっくり消えて現れるアニメーションを加えます。
今回のデモでは、HTML・CSS・JavaScriptの3つのタブを用意しています。タブをクリックすると、現在の内容が0.7秒かけて消え、その後、選択したタブの内容が0.7秒かけて下から上へ移動しながら表示されます。
切り替え中は別のタブをクリックしても処理が重ならないようにしています。CSSの透明度と位置の変化を組み合わせ、JavaScriptでタブの選択状態と表示する内容を制御する仕組みです。商品情報やサービス紹介など、複数の内容を同じ表示エリアで切り替える場面にも利用できます。
デモ
タブをクリックすると、対応する内容がゆっくりフェードしながら切り替わります。
HTML・CSS・JavaScriptの各タブをクリックすると、現在の内容がフェードアウトし、対応する内容がフェードインします。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>フェードイン・フェードアウトで開閉するタブ切り替え</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- タブ切り替え全体 -->
<div class="fade-tab-switch_wrap">
<!-- タイトル -->
<div class="fade-tab-switch_title">
フェードで切り替わるタブ
</div>
<!-- 説明文 -->
<p class="fade-tab-switch_text">
タブをクリックすると、対応する内容がゆっくりフェードしながら切り替わります。
</p>
<!-- タブ一覧 -->
<div
class="fade-tab-switch_tabs"
role="tablist"
aria-label="使用技術">
<!-- HTMLタブ -->
<button
class="fade-tab-switch_tab is-active"
id="fade-tab-switch-html"
type="button"
role="tab"
aria-controls="fade-tab-switch-panel-html"
aria-selected="true"
data-fade-tab="html">
HTML
</button>
<!-- CSSタブ -->
<button
class="fade-tab-switch_tab"
id="fade-tab-switch-css"
type="button"
role="tab"
aria-controls="fade-tab-switch-panel-css"
aria-selected="false"
data-fade-tab="css">
CSS
</button>
<!-- JavaScriptタブ -->
<button
class="fade-tab-switch_tab"
id="fade-tab-switch-js"
type="button"
role="tab"
aria-controls="fade-tab-switch-panel-js"
aria-selected="false"
data-fade-tab="js">
JavaScript
</button>
</div>
<!-- パネル全体 -->
<div class="fade-tab-switch_panels">
<!-- HTMLパネル -->
<div
class="fade-tab-switch_panel is-active"
id="fade-tab-switch-panel-html"
role="tabpanel"
aria-labelledby="fade-tab-switch-html"
data-fade-panel="html">
HTMLはWebページの構造を作るためのマークアップ言語です。タブと各パネルの内容を配置します。
</div>
<!-- CSSパネル -->
<div
class="fade-tab-switch_panel"
id="fade-tab-switch-panel-css"
role="tabpanel"
aria-labelledby="fade-tab-switch-css"
data-fade-panel="css">
CSSはタブの色やレイアウト、パネルのフェードイン・フェードアウトを設定するために使います。
</div>
<!-- JavaScriptパネル -->
<div
class="fade-tab-switch_panel"
id="fade-tab-switch-panel-js"
role="tabpanel"
aria-labelledby="fade-tab-switch-js"
data-fade-panel="js">
JavaScriptはクリックされたタブに合わせて、表示するパネルを切り替えるために使います。
</div>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルは、HTML・CSS・JavaScriptの3ファイルで構成されています。HTMLで3つのタブと対応するパネルを配置し、CSSで表示・非表示のアニメーションを設定します。JavaScriptではクリックされたタブに応じて、現在のパネルをフェードアウトさせた後、次のパネルをフェードインさせます。外部ライブラリやサーバーは必要ありません。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.html：HTML・CSS・JavaScriptのタブボタンと、それぞれに対応する説明文を配置します。
style.css：タブの外観、選択中の色、パネルのフェードと上下移動、スマートフォン向けの表示を設定します。
script.js：クリックされたタブを判定し、パネルの切り替え順序とアニメーション中の操作制限を制御します。
設置方法・使い方
「サンプル一式をダウンロード」からZIPファイルを保存して展開し、3つのファイルを同じフォルダに配置します。index.htmlをブラウザで開くと動作を確認できます。最初はHTMLタブが選択されており、CSSまたはJavaScriptのタブをクリックすると、現在の説明文が消えてから新しい説明文が表示されます。切り替え中のクリックは受け付けず、アニメーションが完了すると再び操作できます。
フェードイン・フェードアウトの仕組みと調整方法
style.cssでは、通常のパネルを透明にして少し下へ配置し、is-activeが付いたパネルを表示します。透明度を表すopacityと上下位置を表すtransformを変化させることで、内容が消えたり、下から上へ現れたりする動きを作っています。
/* パネル */
.fade-tab-switch_panel{
position:absolute; /* パネルを重ねる */
inset:0; /* 全面配置 */
padding:24px; /* 内側余白 */
color:#4b5563; /* 文字色 */
font-size:16px; /* 文字サイズ */
line-height:1.8; /* 行間 */
opacity:0; /* 非表示 */
visibility:hidden; /* 非表示 */
transform:translateY(18px); /* 少し下から表示 */
pointer-events:none; /* 非表示中は操作不可 */
/*
フェード時間です。
0.7秒かけて表示・非表示を切り替えます。
値を大きくするとゆっくり、
小さくすると速く切り替わります。
*/
transition:
opacity .7s ease,
transform .7s ease,
visibility .7s ease;
}
/* 表示中パネル */
.fade-tab-switch_panel.is-active{
opacity:1; /* 表示 */
visibility:visible; /* 表示 */
transform:translateY(0); /* 元の位置 */
pointer-events:auto; /* 操作可能 */
}
style.cssのopacity:0は透明、opacity:1は表示状態を表します。translateY(18px)は表示前のパネルを18px下へずらす設定です。18pxを大きくすると移動距離が増え、translateY(0)へ戻る際の動きが大きくなります。上下移動をなくしてフェードだけにしたい場合は、通常状態のtranslateY(18px)をtranslateY(0)に変更します。
transitionの.7sはアニメーションにかかる0.7秒を表します。値を大きくするとゆっくり、小さくすると速く切り替わります。タブボタンの背景色と文字色にも同じ.7sが設定されているため、選択中のタブの色も徐々に変化します。
タブを順番に切り替える仕組み
script.jsでは、クリックされたタブのdata-fade-tabから切り替え先を取得します。現在のパネルからis-activeを外してフェードアウトを開始し、0.7秒後に次のパネルへis-activeを付けてフェードインさせます。
/* 現在のパネルをフェードアウトする */
currentPanel.classList.remove("is-active");
/*
現在のパネルがフェードアウトしてから
次のパネルをフェードインする。
700は0.7秒を表す。
CSSのtransitionで指定した.7sと同じ値にする。
値を大きくすると切り替えが遅くなり、
小さくすると速くなる。
*/
setTimeout(function(){
/* 対応するパネルをフェードインする */
nextPanel.classList.add("is-active");
/*
次のパネルのフェードイン完了後に
連続操作の制限を解除する。
700は0.7秒を表す。
CSSのtransitionで指定した.7sと同じ値にする。
*/
setTimeout(function(){
fadeTabSwitchChanging=false;
},700);
},700);
script.jsの2か所の700は、それぞれフェードアウトの待ち時間とフェードイン完了までの待ち時間です。アニメーション速度を変更する場合は、style.cssの.7sと、script.jsの2か所の700を対応する値に変更してください。例えば1秒にする場合は1sと1000に設定します。現在の設定では、パネルの切り替え全体に約1.4秒かかります。
また、fadeTabSwitchChangingがtrueの間は別のタブをクリックしても切り替え処理が実行されません。これにより、フェード中に複数のパネルが切り替わることを防いでいます。
タブやパネルの内容を変更する方法
index.htmlでは、各タブのdata-fade-tabと、対応するパネルのdata-fade-panelに同じ値を指定しています。例えばHTMLタブにはhtml、CSSタブにはcssを使用しています。タブの名称や説明文は自由に変更できます。タブを追加する場合は、ボタンとパネルを1組追加し、それぞれのデータ属性を一致させてください。idとaria-controls、aria-labelledbyの対応関係も維持します。
レスポンシブ対応
全体の横幅はwidth:100%とmax-width:700pxで設定されており、画面幅に応じて縮小します。画面幅が640px以下になると、外側の余白が24px 18px、タブの文字サイズが14px、タブ同士の間隔が4pxに変更されます。パネルの最低高さも150pxから180pxへ広がり、狭い画面でも説明文を表示できるようにしています。これらの値はstyle.cssの@media(max-width:640px)内で調整できます。
コメント