墨がのる文章

使い方

<ScrollInk
  label="Philosophy"
  paragraphs={['私たちは、[[毎日つかう道具]]こそ丁寧につくるべきだと考えています。']}
  note="— 代表 山野 結"
/>

• paragraphs は段落ごとの配列です。[[ ]] で囲んだ部分にマーカーが引かれます。
• 欧文は単語ごと、和文は一文字ずつ濃くなります。

動きの仕組み

• mountScrollInk(root) が GSAP の ScrollTrigger（scrub: 0.4）でタイムラインを作ります。本文の上端が画面の78%に来たところから、下端が55%に来るまでの間に全文字の不透明度を 0.16 から 1 にします。
• 文字ごとの変化は少しずつ重なるように配置しているため、墨が波のように広がって見えます。
• マーカーは語句の最後の文字が濃くなる頃に、背景の幅を 0% から 100% へ伸ばします。
• 動きは gsap.matchMedia の中だけで設定するため、prefers-reduced-motion: reduce や JavaScript なしでは最初から全文が読めます。

調整する箇所

• 配色は --scroll-ink-bg、--scroll-ink-ink、--scroll-ink-marker で変更できます。
• 薄い状態の濃さは motion.ts の PENCIL、範囲は ScrollTrigger の start と end で調整します。
• 1つの段落はおよそ120文字以内を目安にしてください。

参考にした傾向

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

利用条件

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