SCROLL EFFECT
粘性叠层卡片Sticky Stacking Cards
每张卡滚动到位后钉住，下一张盖上来，像一叠纸被逐张码齐。
效果预览
第一张 · 钉住scale .94
第二张 · 盖上来scale .97
第三张 · 最上层scale 1
每张卡 sticky 钉住，依次覆盖
适合用在哪
功能亮点逐条展示、套餐对比、章节切换。
容易踩的坑
- 所有卡片 top 值相同，后一张完全盖住前一张，看不出堆叠的层次。
- 单张卡片内容高于视口减 top 值，钉住后底部内容被截断永远看不到。
- 超过 5 张卡且每张 100vh，页面滚动距离过长，用户误以为页面卡住。
设计提示词 · Prompt
粘性叠层卡片（Sticky Stacking Cards）：每张卡外层是 100vh 的滚动段，卡片本体 position:sticky; top:15vh。后一张卡滚入时自然盖住前一张；要更精致可让已钉住的卡随进度缩小并降透明度（scale 1→0.94、brightness 1→0.9，用 scroll 进度映射）。卡与卡之间顶部留出 8-12px 的"纸边"，堆叠感立刻出来。卡数 3-5 张为宜，每张内容一个主题。纯 CSS sticky 即可实现基础版，缩放效果需 JS 计算。
Sticky Stacking Cards: each card's wrapper is a 100vh scroll segment, and the card itself uses position:sticky; top:15vh. The next card naturally covers the previous one as it scrolls in; for more polish, pinned cards can shrink and dim with progress (scale 1→0.94, brightness 1→0.9, mapped to scroll progress). Leave an 8-12px "paper edge" at the top between cards and the stacking feel appears immediately. 3-5 cards is ideal, one theme per card. The basic version works with pure CSS sticky; the scaling effect needs JS calculation.
常见搭配
同一页面里经常和「粘性叠层卡片」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-stack"> <div class="d-stack__card"><b>第一张 · 钉住</b><span>scale .94</span></div> <div class="d-stack__card"><b>第二张 · 盖上来</b><span>scale .97</span></div> <div class="d-stack__card"><b>第三张 · 最上层</b><span>scale 1</span></div> <span class="d-stack__tag">每张卡 sticky 钉住，依次覆盖</span> </div>