Stacking Cards (滚动堆叠卡片)

卡片略微错开地叠在一起，最上面的卡片移开，露出下一张。

在[应用位置]添加“卡片堆叠”(Card Stack)，也叫 stacked cards。
把卡片略微错开地一张张叠在后面；每次点击，最上面的卡片向一侧甩开并塞到最后，其余卡片依次前移：平滑，轻快利落。
支持键盘操作，让屏幕阅读器能按顺序访问每张卡片；如果用户开启了“减少动态效果”(prefers-reduced-motion)，改用简单的淡入淡出。

在一段滚动范围内，元素固定在原位，其他内容或动画继续推进。

在[应用位置]添加“滚动固定”(Pinning)效果，也叫固定区块(pinned section)或 sticky section。
旁边的内容随滚动经过时，一个面板要固定在原位，并随正在阅读的步骤切换内容，区块结束时再解除固定。
优先使用原生的 sticky 定位，而不是劫持滚动；并确保在小屏幕上即使没有固定面板，每个步骤也依然易读。

滚动停止时会吸附到预设的位置，例如幻灯片或区块。

在[应用位置]添加“滚动吸附”(Scroll Snap)，也叫 scroll snapping 或 snap scrolling。
滚动停下时，视图要干净利落地吸附到最近的区块，让每个区块都对齐边缘，而不是停在半中间。
使用浏览器原生的吸附功能，让滚轮、触摸和键盘滚动都照常可用，并确保比视口更高的内容也能完整阅读。

用户向下滚动后，吸顶头部的高度或尺寸会缩小。

在[应用位置]添加“吸顶头部收缩”(Sticky Header Shrink)，也叫 shrinking header 或 shrink on scroll。
头部固定在顶部，读者稍微向下滚动后，平滑地收缩成更窄的条、Logo 也变小；回到顶部时再恢复原样。
头部尺寸变化时，不要让下方内容跳动。

页面纵向滚动时，大号文字行横向滑动。

在[应用位置]添加“滚动文字跑马灯”(Text Marquee on Scroll)，也叫 scroll text marquee 或 scroll velocity text。
页面向下滚动时，大号文字行横向滑动，相邻行朝相反方向移动；向上滚动时再滑回来。
让移动绑定滚动位置，不要让长文字行产生横向滚动条；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就保持静止。

随着用户滚动，元素或场景放大或缩小。

在[应用位置]添加“滚动缩放”(Zoom on Scroll)效果，也叫 scroll zoom 或 scale on scroll。
区块停留在视口中时，元素要随着滚动从一张小卡片平滑放大，直到铺满整个视口；向上滚动时再缩回去。
缩放时不要挤动周围的布局；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就直接以最终尺寸显示，不做缩放。