スキルバー アニメーション
このスキルバーは、HTML・JavaScript・WordPress といった項目ごとの習熟度を、横棒の伸びるアニメーションで示すコンポーネントです。各バーの内側に apb__fill 要素を置き、初期幅をゼロにしておき、 transition:width 1s ease で目標値までなめらかに伸ばします。
解説
このスキルバーは、HTML・JavaScript・WordPress といった項目ごとの習熟度を、横棒の伸びるアニメーションで示すコンポーネントです。各バーの内側に apb__fill 要素を置き、初期幅をゼロにしておき、transition:width 1s ease で目標値までなめらかに伸ばします。目標の数値は data-width 属性に持たせ、JavaScript が読み取って幅に反映する仕組みなので、数字を書き換えるだけで割合を調整できます。
使いどころ
自己紹介ページのスキル一覧、サービス紹介での対応範囲、アンケート結果の比率表示などに向きます。バーの色は linear-gradient(90deg,#0066cc,#33aaff) で青系のグラデーションにしているので、ブランドカラーに合わせて変更すると印象が変わります。
IntersectionObserverを使い、バーが画面に入った瞬間にだけアニメーションを開始します- 一度再生したバーは監視を解除するため、スクロールで往復しても無駄に再生されません
- 動きが苦手な利用者のために、
prefers-reduced-motionでtransitionを切る配慮を足すとより親切です
よくある質問
パーセントの数値はどこで変えますか
各バーの data-width 属性の値を書き換えます。たとえば data-width に 92 と書けば 92 パーセントまで伸びます。横に表示するラベルの数字は別の要素なので、合わせて手で直してください。
JavaScript は必須ですか
画面に入ったときに動かす演出には IntersectionObserver を使うため JavaScript が必要です。最初から最終的な幅を CSS で指定すれば、JavaScript なしの静的なバーとしても使えます。