変形するページネーション
CSSのみボタン
変形をつかってアクティブなものを表すページネーションです。
実装のポイント
スライダーやカルーセルUIに付属するページネーションのカスタマイズを想定しているので、HTMLやクラス名などはライブラリに応じて適宜変更してください。
レイアウトについてはflexとflex-basisによってうまく割り付けています。アクティブなものは200%とすることで他のものより2倍の割り付けになります。
また、アクティブになるときは0.12sほどのアニメーションの実行を遅延させています。前のページネーションが先に小さくなってから新しいものが動き始めます。この遅延がないと縮む動作と伸びる動作が同期し、右端から押し出すような動きになってしまいます。これは少し味気ない動きになってしまいます。
コード例
HTML
<!-- ライブラリを利用する場合は適宜て調整してください。タグ、クラス名は一例です -->
<ul class="pagination" role="tablist">
<li role="presentation">
<button
class="paginationButton isActive"
role="tab"
aria-selected="true"
aria-controls="YourSlideId1"
aria-label="スライド1へ移動"
></button>
</li>
<!-- 省略 -->
</ul>
CSS
.pagination {
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
width: 280px;
display: flex;
justify-content: center;
gap: 12px;
list-style: none;
li {
display: contents;
}
}
.paginationButton {
display: block;
width: 100%;
height: 12px;
background-color: #ddd;
border-radius: 6px;
transition:
flex-basis 0.3s var(--ease-out-quart),
background-color 0.8s var(--ease-out-quart);
flex-basis: 100%;
/* アクティブなクラス名はライブラリなどに応じて適宜調整してください */
&.isActive {
flex-basis: 200%;
transition:
flex-basis 0.4s 0.12s var(--ease-out-quart),
background-color 0.8s var(--ease-out-quart);
background-color: #333;
}
}
