3D回転するアコーディオンは、見出しをクリックすると、項目全体が立体的に回転しながら内容を開閉するアコーディオンです。通常の表示・非表示の切り替えに加えて、斜め方向から回転する動きを組み合わせています。
今回のサンプルでは、見出しをクリックすると、選択した項目が小さく傾いた状態から回転しながら正面を向き、元の大きさに戻ります。同時に説明文の表示・非表示が切り替わり、見出し右側のプラス記号もマイナス記号に変化します。閉じるときも同じ回転アニメーションが再生され、説明文が非表示になります。
3つのアコーディオンはそれぞれ独立して動作し、クリックした項目だけが回転します。ほかの項目は開閉状態を維持するため、複数の説明文を同時に表示することもできます。また、同じ見出しを繰り返しクリックしても、そのたびに3D回転アニメーションが再生されます。
デモ
見出しをクリックすると、クリックした項目だけが3D回転しながら開閉します。
各見出しをクリックすると、クリックしたアコーディオン項目だけが斜め方向へ3D回転し、対応する内容が開閉します。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>3D回転しながら開閉するアコーディオン</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- アコーディオン全体 -->
<div class="accordion-3d-item_wrap">
<!-- タイトル -->
<div class="accordion-3d-item_title">
3D回転するアコーディオン
</div>
<!-- 説明文 -->
<p class="accordion-3d-item_text">
見出しをクリックすると、クリックした項目だけが3D回転しながら開閉します。
</p>
<!-- アコーディオン一覧 -->
<div class="accordion-3d-item_list">
<!-- 1つ目のアコーディオン項目 -->
<div class="accordion-3d-item_item">
<!-- 開閉ボタン -->
<button class="accordion-3d-item_button" type="button">
<span>アコーディオンとは？</span>
<span class="accordion-3d-item_icon">＋</span>
</button>
<!-- 開閉する内容 -->
<div class="accordion-3d-item_content">
アコーディオンは、見出しをクリックして内容の表示・非表示を切り替えられるUIです。
</div>
</div>
<!-- 2つ目のアコーディオン項目 -->
<div class="accordion-3d-item_item">
<!-- 開閉ボタン -->
<button class="accordion-3d-item_button" type="button">
<span>どんな場面で使う？</span>
<span class="accordion-3d-item_icon">＋</span>
</button>
<!-- 開閉する内容 -->
<div class="accordion-3d-item_content">
FAQ、商品説明、設定項目、お問い合わせページなど、情報を整理して表示したい場面で利用できます。
</div>
</div>
<!-- 3つ目のアコーディオン項目 -->
<div class="accordion-3d-item_item">
<!-- 開閉ボタン -->
<button class="accordion-3d-item_button" type="button">
<span>必要なファイルは？</span>
<span class="accordion-3d-item_icon">＋</span>
</button>
<!-- 開閉する内容 -->
<div class="accordion-3d-item_content">
HTML、CSS、JavaScriptの3ファイルで作成できます。外部ライブラリは使用しません。
</div>
</div>
</div>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
3D回転するアコーディオンは、HTML・CSS・JavaScriptの3ファイルで構成しています。HTMLには3つのアコーディオン項目を配置し、CSSでは斜め方向への3D回転や拡大縮小、JavaScriptではクリックした項目の開閉と回転アニメーションの再実行を制御します。外部ライブラリや画像ファイルは使用しません。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlには、アコーディオンの見出し、開閉記号、開いたときに表示する文章を記述しています。style.cssには、項目のデザインに加えて、3D回転の角度・速度・開始時の大きさを設定しています。script.jsには、クリックした項目だけを開閉し、回転アニメーションを繰り返し実行する処理を記述しています。
設置方法・使い方
「サンプル一式をダウンロード」からZIPファイルを保存して展開し、index.html・style.css・script.jsを同じフォルダに配置してください。index.htmlをブラウザで開くと動作を確認できます。各見出しをクリックすると、その項目が3D回転しながら開閉します。複数の項目を同時に開くこともできます。
3D回転を実現しているCSS
斜め方向への回転は、style.cssの@keyframes accordion-3d-item_rotateで設定しています。次のコードでは、項目を斜めに120度傾け、70％の大きさから回転を開始し、元の角度と大きさへ戻しています。
/* アコーディオン項目の3D回転 */
@keyframes accordion-3d-item_rotate{
/* 回転開始時 */
0%{
transform:rotate3d(1,1,0,-120deg) scale(.7);
/*
X軸とY軸を使って斜め方向へマイナス120度回転する。
-120degを変更すると回転角度が変わる。
scale(.7)を大きくすると開始時の縮小が弱くなる。
*/
}
/* 回転終了時 */
100%{
transform:rotate3d(0,0,0,0deg) scale(1); /* 通常の角度と大きさへ戻す */
}
}
rotate3d(1,1,0,-120deg)が回転方向と角度を決めています。最初の3つの数値は回転軸を指定しており、1,1,0はX軸とY軸を組み合わせた斜め方向の回転です。最後の-120degが回転角度で、マイナスは回転方向を表します。
scale(.7)は回転開始時の大きさを70％にする設定です。回転が進むにつれてscale(1)の100％まで拡大するため、回転と同時に手前へ現れるような動きになります。
回転の速度と奥行きを決めるCSS
回転にかかる時間はanimation、立体的な遠近感はperspectiveで指定しています。
/* アコーディオン一覧 */
.accordion-3d-item_list{
perspective:1200px; /* 3D回転の奥行き。値を小さくすると遠近感が強くなる */
}
/* 3D回転中のアコーディオン項目 */
.accordion-3d-item_item.is-rotating{
animation:accordion-3d-item_rotate 1.2s cubic-bezier(.22,1,.36,1);
/*
1.2秒かけて3D回転する。
値を大きくするとゆっくり回転し、小さくすると速く回転する。
*/
}
animationに指定したaccordion-3d-item_rotateが、先ほどの回転アニメーションを呼び出しています。1.2sは回転にかかる時間で、cubic-bezier(.22,1,.36,1)は動きの速度変化を決める設定です。現在は回転開始後に大きく動き、終了に近づくにつれてゆっくり停止します。
perspective:1200px;は3D回転を立体的に見せるための設定です。値を小さくすると遠近感が強まり、大きくすると遠近感が弱くなります。
クリックするたびに回転させるJavaScript
script.jsでは、クリックされた項目から一度is-rotatingを削除し、再び追加しています。これにより、同じ見出しを繰り返しクリックしても回転アニメーションが実行されます。
/*
前回の回転用クラスを削除する。
同じ項目を繰り返し回転できるようにする。
*/
item.classList.remove("is-rotating");
/*
ブラウザへ現在の状態を反映させる。
回転アニメーションを再実行するために使用する。
*/
void item.offsetWidth;
/* クリックした項目の開閉状態を切り替える */
item.classList.toggle("is-open");
/* クリックした項目だけに3D回転を適用する */
item.classList.add("is-rotating");
/* 開閉状態に合わせて＋と－を切り替える */
icon.textContent = item.classList.contains("is-open")
? "－"
: "＋";
classList.toggle("is-open")は内容の表示・非表示を切り替える処理です。一方、classList.add("is-rotating")は3D回転を開始する処理です。開閉状態と回転アニメーションを別々のクラスで管理しているため、開くときも閉じるときも同じ回転が実行されます。
void item.offsetWidth;は、回転用クラスを削除した状態をブラウザに反映させるための処理です。これを挟むことで、直後に同じクラスを追加してもアニメーションを再実行できます。
カスタマイズできる内容
index.htmlのaccordion-3d-item_button内の文章を変更すると見出しを変更でき、accordion-3d-item_content内の文章を変更すると開いたときの内容を変更できます。
style.cssでは、accordion-3d-item_itemのbackground:#ffffff;で項目の背景色、border-radius:12px;で角丸を変更できます。開閉記号の色はaccordion-3d-item_iconのcolor:#2563eb;で変更できます。
数値調整
3D回転の動きを変更する場合は、style.cssの次の数値を調整してください。
・rotate3d(1,1,0,-120deg)
回転角度は-120degです。-180degにすると半回転、-360degにすると1回転して元の向きに戻ります。さらに大きく回転させたい場合は、-720degにすると2回転します。いずれも@keyframes accordion-3d-item_rotateの0%にある値を変更します。
・scale(.7)
回転開始時の大きさです。.5にすると50％の大きさから拡大し、1にすると縮小せずに回転します。
・animation:accordion-3d-item_rotate 1.2s cubic-bezier(.22,1,.36,1);
1.2sが回転時間です。2sにすると2秒かけてゆっくり回転し、.6sにすると0.6秒で素早く回転します。回転数を増やした場合は、この時間も長くすると動きを確認しやすくなります。
・perspective:1200px;
立体的な遠近感を調整します。600pxにすると遠近感が強くなり、2000pxにすると平面的な回転に近づきます。
・max-width:700px;
アコーディオン全体の最大横幅です。値を大きくすると横に広がり、小さくすると狭くなります。
レスポンシブ対応
style.cssでは、accordion-3d-item_wrapにwidth:100%;とmax-width:700px;を設定しています。また、画面幅が640px以下になると、メディアクエリによって内側余白が32pxから上下24px・左右18pxへ変更されます。3D回転の角度や速度は画面幅によって変化しません。
コメント