スクロール加速マーキー

使い方

<VelocityMarquee
  label="私たちの専門分野"
  rows={[
    { items: ['Branding', 'Web Design'], tone: 'fill', speed: 50 },
    { items: ['Editorial', 'Identity'], tone: 'outline', speed: 40 },
    { items: ['ブランディング', 'ウェブ制作'], tone: 'accent', speed: 70 },
  ]}
/>

• tone は fill（塗り）、outline（輪郭）、accent（色付きのピル）から選びます。
• speed は止まっているときの速さ（px/秒）です。偶数行と奇数行は逆向きに流れます。
• 各行は2回描画し、2回目は読み上げ対象から外しています。画面が広く足りない場合は、JavaScriptが隠れた複製を追加します。

動きの仕組み

• mountVelocityMarquee(root) が requestAnimationFrame で各行の位置を更新します。位置は1回分の幅で割った余りにするため、どんな長さでも継ぎ目なくループします。
• スクロール速度はなめらかにしてから速さに加え、同じ値で skewX の傾き（最大9度）を付けます。
• 下へスクロールすると通常の向き、上へスクロールすると全行が逆向きに流れます。
• IntersectionObserver で画面外のときと、タブが非表示のときはループを止めます。

調整する箇所

• 配色は --marquee-bg、--marquee-ink、--marquee-accent、文字の大きさは --marquee-size で変更できます。
• 加速の強さは BOOST、傾きの上限は MAX_SKEW、追従のなめらかさは FOLLOW で調整します。

参考にした傾向

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

利用条件

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