滚动章节

把长页面按章节讲出来:固定舞台、滑入面板、字幕滚动、逐词点亮、叠放卡片和漂移图片列,并在真实浏览器里检查空滚动。

滚动章节

把一个长页面做成随滚动推进的章节,用九个零依赖模块:带滚动时间线的固定舞台、依次滑入覆盖的全屏面板、透视字幕滚动、逐词点亮的段落、叠放卡片、反向跑马灯、固定标题配漂移图片列、入场显现和章节导航。最后用浏览器检查把页面滚一遍,找出空滚动、不动的模块、没点亮的词、横向溢出,以及关掉 JavaScript 或减少动效时消失的文字。

使用方法

  1. 每章写一行:读者看到什么、为什么在这里、由哪个模块承载;只选一个主打模块

  2. 先写成普通 HTML,再加 data-ch 属性:舞台、面板、字幕滚动、逐词、叠卡、跑马灯、漂移、显现和章节导航

  3. 运行 scripts/check.mjs,覆盖桌面、手机、减少动效和关闭 JavaScript,修掉所有问题

常见问题

检查会找出什么?

它在 1440 × 900 和 390 × 844 下按四分之一屏的步长滚动渲染后的页面,记录每个模块的状态,报告:名字写错或从不变化的模块、固定区里一屏以上什么都没发生的空滚动、没完全点亮的段落、横向溢出、控制台错误、减少动效或关闭 JavaScript 时被隐藏的文字、超过一个主打模块,以及固定超过六屏的区块。一个故意做坏的测试页报出 9 个错误和 5 个警告;三个示例都是零。

需要库或模型 Key 吗?

不需要。模块就是一个 CSS 文件加一个脚本,没有依赖。检查需要 Node.js 和 Chrome。示例里的照片是为这些演示生成的,你自己的页面用你的图片。

减少动效或关闭 JavaScript 时会怎样?

没有脚本时页面就是普通的 HTML 流式排版。减少动效时不固定、不随滚动变化,所有词都点亮,舞台各层按顺序显示最终状态。任一模式下有文字被隐藏,检查都会判定失败。

示例是真实的吗?

不是。Northbound No. 9 和 Okra Studio 都是虚构的,里面的数字也是编的。