用途:让阅读进度随滚动可见,同时不替换真实文本、不破坏行内标记、不依赖固定行数。适合正文段落中做逐词显现的阅读节拍效果。
主要能力与做法:
- 在 DOM 中保留一份未经改动的可访问文本源。使用 TreeWalker 遍历文本节点,不用 textContent 或 innerHTML 打平容器;跳过 script、style、表单控件和带 [data-no-split] 的元素。仅把非空白标记替换为 span,原样保留空白节点。仅当仍存在等价的未拆分可访问副本时,才给生成的 span 加 aria-hidden="true"。
- 避免按行拆分,保持浏览器换行可随容器宽度、语言、缩放和字体加载自由变化。
- 以区块进度为唯一真值映射滚动到词:用 Math.min/max 把进度夹取到 0 到 1,计算 local = reveal * wordCount - index,再设置 --word-progress,并据此插值隐藏态透明度、模糊和垂直偏移;可见态与正常排版一致。
- 精确起点、终点、刷新或共享时间线时可用 GSAP ScrollTrigger 的 scrub;独立区块可用无依赖滚动测量加 requestAnimationFrame。
默认参数建议:隐藏透明度 0.12–0.3;模糊 4–10px;垂直偏移 0.08–0.22em;段落滚动区间为视口的 120–220%;相邻词重叠 10–30%;滚动映射不加缓动,仅在需要时对视觉插值加缓动。把参数暴露为 CSS 自定义属性,滚动区间按文本长度缩放。
保留强调:链接、strong、em、mark 和强调 span 保留语义与样式;默认继承颜色,在原始元素而非 token 索引上设置强调。不要只在悬停或读者已滚过后才显示必要链接。仅当源文本变化时重新拆分;响应式换行无需重建 token。清理时需有足够状态还原原始 DOM。
可读性:使用真实文档流;只有当文案与证据支持短暂刻意阅读节拍时才 pin。不要打字机光标、随机延迟或自动播放,除非明确要求。在 prefers-reduced-motion: reduce 下立即显示所有词,移除模糊、位移和 pin;保持屏幕阅读器输出自然,不逐词播报。隐藏态与最终态都要验证对比度。
清理与验证:清理时销毁 ScrollTrigger、移除滚动和 resize 监听、取消动画帧,并在路由切换或组件卸载时还原原始标记子树;若起止位置依赖文本几何,在字体加载后刷新测量。验证行内链接与强调、标点、重复空格、长词、200% 缩放、390/768/1440 宽度、内容变更、正反向滚动、减少动效、键盘焦点、屏幕阅读器阅读顺序和拆卸;禁用 JavaScript 时最终 DOM 仍须能表达完整句子。可用 demo/index.html 作参考,demo/PROMPT.md 用于复现或改编,REFERENCES.md 保存仅链接的实现来源列表。
限制:本资料未提供具体安装命令、包名、收费或价格信息,暂未提供。