横スクロール・トラック

使い方

<HorizontalTrack
  eyebrow="OUR SERVICES"
  heading="縦に進むと、横に流れる。"
  chapters={[{ title: 'Research', body: '説明文', palette: ['#1a1a1a', '#ebe6dc'] }]}
/>

• palette はパネルの背景色と文字色です。
• 4〜6章程度を目安にしてください。

動きの仕組み

• mountHorizontalTrack(root) は ScrollTrigger の pin で画面を固定し、横にはみ出した幅と同じ距離だけ縦にスクロールさせます。1px の縦スクロールで 1px 横に進みます。
• パネル内の大きな番号と本文は containerAnimation で、パネルが画面を横切る間に逆方向へ少しずれます。
• 画面中央に最も近いパネルを現在の章として表示します。
• prefers-reduced-motion: reduce や JavaScript なしでは固定せず、scroll-snap で指やトラックパッドで横にスワイプできる並びになります。

調整する箇所

• 配色は --track-bg、--track-ink、--track-accent、パネルの幅は --track-panel で変更できます。
• 追従のなめらかさは scrub、ずれの量は xPercent と x で調整します。

参考にした傾向

Webデザインクリップ に掲載された国内サイトでよく使われている「横スクロール」の表現を参考に、このカタログ用に一から設計・実装しました。特定サイトのコード・画像・文言・配色は使っていません。

利用条件

このカタログ用に書き下ろした実装で、MITライセンスで公開しています。LICENSE、src/Component.astro、src/motion.ts を取得して利用できます。再配布する場合は LICENSE の著作権表示と許諾文を残してください。