重なるカード

使い方

<StackingCards
  heading="How we work"
  cards={[{ kicker: 'LISTEN', title: 'まず、聞く。', body: '説明文', palette: ['#f2efe8', '#161616', '#e4572e'] }]}
/>

• palette は背景・文字・アクセントの3色です。右側の図形も同じ色で描きます。
• 3〜5枚程度を目安にしてください。

動きの仕組み

• 重なり自体は position: sticky だけで動くため、JavaScriptなしでも重なって表示されます。各カードは --stack-step ずつ下にずれて止まり、背後のカードの端が見えます。
• mountStackingCards(root) は、後ろのカードが自分の貼り付き位置まで近づいた割合を計算し、その合計を「奥行き」として、1段ごとに5%縮小・暗さ16%を加えます。
• 計算はスクロールと画面サイズの変化のときだけ、画面内にあるときだけ行います。

調整する箇所

• 上端の位置は --stack-top、ずらす幅は --stack-step で変更できます。
• 縮む量は SHRINK、暗くなる量は DIM で調整します。

参考にした傾向

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

利用条件

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