DESIGN NOTES
为什么值得收藏
- 逐屏停靠滚动后视口停在一屏内容的位置,形成一次停一屏的浏览节奏。
- 向 AI 描述“页面采用 Scroll Snap,纵向滚动时让每个整屏区块依次吸附到视口。”
- 参考画面样本帧中下方展示编号区块;采样帧不能确定吸附时长或曲线。
同源设计合集 · 6 项
UI 组件
结合原始资料,按需应用到自己的设计中。
实现一个整屏滚动吸附组件(原生 HTML/CSS/JS,零依赖,单文件交付): 【效果描述】来源采样帧展示了编号区块 1、2、3,但仅凭这些帧无法确认原视频的完整动效、吸附时长或曲线。实现按演示合同呈现三个编号整屏:浏览器原生纵向滚动后,每屏吸附到滚动容器的起点。 【交互参数】触发条件为用户在容器内纵向滚动。可调建议:容器高度设为 `100dvh`,各屏最小高度与容器相同,使用 `scroll-snap-type: y mandatory` 和 `scroll-snap-align: start`。这些是实现建议,并非来源测量值。到达首屏或末屏时保持正常滚动边界,不循环切换。 【使用示例】可用于三屏作品展示,依次呈现作品 1、2、3;也可用于三段品牌故事,按相同结构替换每屏内容。 【实现要点】先建立独立滚动容器和三个编号区块,再设置纵向溢出与原生 Scroll Snap,最后将容器尺寸和吸附方式集中为带注释的可调参数。 【质量要求】交付可直接运行的单个 HTML 文件;所有组件类名使用 `uw-` 前缀,不污染全局样式;遵循 `prefers-reduced-motion`,避免强制平滑滚动。 【参考资源】 - 资料详情:https://ui.undoai.cn/components/full-screen-scroll-snap/ - Demo 源码:https://ui.undoai.cn/components/full-screen-scroll-snap/demo.html - 原始设计参考图:https://ui.undoai.cn/components/full-screen-scroll-snap/refs/01.png(中下方编号为 1 的区块示意) - 原始设计参考图:https://ui.undoai.cn/components/full-screen-scroll-snap/refs/02.png(中下方编号为 2 的区块示意) - 原始设计参考图:https://ui.undoai.cn/components/full-screen-scroll-snap/refs/03.png(中下方编号为 3 的区块示意)
将提示词与你的页面背景、技术栈和目标尺寸一起交给代码助手。实现后对照原图检查布局和状态,再验证键盘、触控和减少动态效果。
展开后加载源代码
查看 Markdown 全文,复制或下载 design.md 后交给开发者使用。
# 整屏滚动吸附 — design.md 内容版本:sha256:1dddfdfda29db876e3cfbbe9695c49113bcfd95159e0b277b62f1dbc0d20e5dd 本文件由当前元数据、实现摘要和实际文件列表确定性生成。元数据记录是资料声明;未提供的数值不作推断。实现建议须在后续开发中选择和验收。 ## 元数据记录 - 资产:components/full-screen-scroll-snap;语义类型:interaction。 - 分类:交互模式。 - 标签:Scroll Snap、整屏滚动、页面切换。 - 场景:全屏作品展示、品牌故事分屏、演示文稿式页面、产品功能分屏。 - 平台:未提供。 - 风格:未提供。 ### 亮点声明 - 逐屏停靠:滚动后视口停在一屏内容的位置,形成一次停一屏的浏览节奏。 - 向 AI 描述:“页面采用 Scroll Snap,纵向滚动时让每个整屏区块依次吸附到视口。” - 参考画面:样本帧中下方展示编号区块;采样帧不能确定吸附时长或曲线。 ### 实际文件与参考资源 - `demo.html`(sha256:bf7eb9ce91bdb72e2bcfd144289518fe79098c93840eb0b4ed070c302e9b0a02) - `meta.yml` - `refs/01.png`(sha256:c84d90d5b3d88f8e2bd9b18c80bc41bb080ebeda631272d537715adcd887a0ee) - `refs/02.png`(sha256:cdebc40d2c0a482c59f7c6e9fb0705d5e0b8417b7bc5d6dfa3ec443375a3cb98) - `refs/03.png`(sha256:2f1a6ffcffdd1500681a1e9e1b8d85fe2bf992554d00b867d99128a55b7be63e) - 参考图:`refs/01.png`;中下方编号为 1 的区块示意。 - 参考图:`refs/02.png`;中下方编号为 2 的区块示意。 - 参考图:`refs/03.png`;中下方编号为 3 的区块示意。 - 实现摘要:sha256:bf7eb9ce91bdb72e2bcfd144289518fe79098c93840eb0b4ed070c302e9b0a02。 ## 未提供 - 未结构化记录的精确色值、字号、间距、断点、动效时长与状态转换参数不作推断;亮点中的数值属于元数据声明,demo 的存在与摘要不代表浏览器行为已验收。 ## 实现建议 - 按正常、悬停、聚焦、激活、禁用、加载、成功和错误状态定义适用的状态表。 - 使用语义化元素,验证键盘操作、焦点可见性、触控目标和减少动效偏好。 - 以 demo.html 为实现参考,逐项验证交互、窄屏布局、文本溢出和错误恢复;具体参数由实现与验收确认。
在完整提示词后补充你的要求;生成提示词不会创建新资产。
DESIGN NOTES
GOOD FOR