滚动电影感个人站点 是做什么的?
构建一个个人或作品集站点,让滚动成为播放指针。不是视频文件。节奏宜人、完全响应式、渐进增强。
权限范围
- 优先使用 CSS 粘滞场景(sticky scenes)加滚动驱动动画。仅当 CSS 无法固定或擦除场景时,才使用时间线库。
- 遵循仓库的艺术方向或品味技能。不要随意采用通用前端工具包,以免与这种品味冲突。
- 使用已安装的官方滚动时间线技能(scroll-timeline skills)。
- 仅收录想法(是/可能):模糊淡入、眩光悬浮、滚动进度、滞后指针、噪点、光线。用 CSS 或所选时间线库重新实现。不要粘贴其他框架的运动原语。
- 尊重
prefers-reduced-motion: reduce— 静态图片、相同内容顺序、无动效触发的行动号召。
摄像机阶梯 (停在第一个稳固的层级)
- 删除冗余场景。
- CSS:粘滞场景、
animation-timeline: view()/scroll()、仅使用 transform 和 opacity。 - 仅当 CSS 无法固定或擦除一个场景时,才使用滚动触发库。温和擦除、线性缓动、卸载时销毁。仅对 transform 和 opacity 设置动画。
- 不要添加第三方平滑滚动劫持、Canvas 帧序列、3D 主视觉或
<video>currentTime 擦除。
场景语法
- 最多 4–6 个场景。相邻切场不得使用相同的布局系列。
- 开场、保持(固定加擦除)、切场、结束。
- 固定模式:一个高滚动容器加上一个粘滞的全视口静态画面。
- 无整页强制滚动捕捉(scroll snap)。
- 内容在 JavaScript 禁用时必须可读。无滚动劫持。无每个时钟周期在
mousemove或scroll上更新框架状态。
个人站点内容(根据简讯调整)
典型节奏:身份标识、我构建的内容、当前产品、链接(他们提供的真实个人主页)、一个清晰的行动号召。 链接只能是真实 URL — 绝不虚构个人主页。如果缺失,请索要真实链接。
光标
允许使用带有弹簧滞后或眩光悬浮效果的自定义光标作为渐进增强。保持原生光标在减少动效和触摸模式下可用。优先使用带 requestAnimationFrame 节流的指针事件监听器,而非每次移动都更新框架状态。
技术栈默认
- 可以使用现代 Web 框架。
- 部署在站主自己的托管账户下,而不是其他团队名下。
- 编码遵循本地编码默认规则:实现,然后二次审查,并设置检查点例程。
完成定义
- 在站主账户下可访问的在线 URL。
- 滚动体验如电影(愉悦、不急促)。
- 响应式;减少动效时显示静态画面。
- 仅包含真实链接。
- 站点上线时报告该 URL。