MOTION HUB

滚动吸附分镜

Snap Stories
#snap-stories · 56/72
SCROLL · 滚动查看

参数调改

PLAYGROUND
吸附强度--snap_type
对齐位置--snap_align
序号主色--accent
序号辅色--accent2
底色--base

实现要点

NOTES
  1. 01

    吸附声明在滚动容器上(根滚动器即 html):scroll-snap-type: y mandatory + 每个分镜 scroll-snap-align;scroll-snap-stop: always 防止一次猛滚跳过两幕。

  2. 02

    mandatory 与 proximity 的取舍:mandatory 停下必对齐(分镜/故事流),proximity 靠近才吸(长文里更克制);本条两个模式都做成了参数。

  3. 03

    分镜高 100vh(iframe 内即视口高),内容 grid 居中且留足内边距,任何吸附位置标题都不会贴边截断。

  4. 04

    不支持 scroll-snap 的环境自动退化为普通连续滚动,内容完整可读;reduced-motion 不受影响(吸附由用户滚动驱动,非时间驱动)。

  5. 05

    demo 的自动分镜步进是预览辅助(smooth 滚动恰好演示吸附对齐),用户滚轮/触摸/按键即停;生产环境删除该脚本。

源代码

SOURCE

加载源代码…