MOTION HUB

卡片叠放

Sticky Stack
#sticky-stack · 63/72
SCROLL · 滚动查看

参数调改

PLAYGROUND
首卡贴顶距离--stack_top
080
px
卡片高度--card_h
4872
vh
卡片圆角--card_radius
828
px
强调色--accent
底色--base

实现要点

NOTES
  1. 01

    叠放的全部机关是 position: sticky:每张卡贴在递增的 top 值上(每层 +14px),后卡滚上来盖住前卡时,前卡上缘留出一条彩边——深度感来自这几条边。

  2. 02

    卡片所在 section 高度 105vh(卡高 + 视口余量),section 结束才会把卡推走;section 之间不要加 margin,否则会露出底色断层。

  3. 03

    卡内行高、内边距留足,卡片被完全盖住之前标题始终完整,任何滚动位置无文字截断。

  4. 04

    sticky 元素由浏览器提升为独立合成层,滚动全程零 JS、零 layout 抖动;不必再给卡片加 will-change。

  5. 05

    reduced-motion 不受影响(效果由滚动位置驱动,非时间驱动);不支持 sticky 的环境退化为普通纵向卡片流。

源代码

SOURCE

加载源代码…