SCROLL EFFECT
数字滚动计数Odometer / Count-up Animation
进入视口时数字从 0 翻滚到目标值，像老式里程表一样逐位转动。
效果预览
0123456789
0123456789
0123456789
0123456789
每月节省的工时（小时）
适合用在哪
数据统计带、定价页的用量估算、成果展示区。
容易踩的坑
- 没用 tabular-nums 等宽数字，计数过程中整行文字左右抖动。
- 初始 HTML 里写的是 0，JS 失败或爬虫抓取时只看到 0，应先输出真实数值。
- 读屏会把每一帧变化的数字都播报出来，动画期间要对其 aria-hidden 并提供最终值。
设计提示词 · Prompt
数字滚动计数（Count-up / Odometer）：数字进入视口时从 0 计数到目标值，1.5-2.5s、easeOut（前快后慢）。JS 版用 requestAnimationFrame 插值；里程表版让每一位数字是一列 0-9 的竖排数字，滚动 translateY 到目标位。必须用 font-variant-numeric:tabular-nums 等宽数字防止抖动。格式化注意：千分位逗号、货币符号、小数位数固定。大数字结束瞬间可以加一个轻微的 scale 弹跳强调。
Count-up / Odometer: when the number enters the viewport, count from 0 to the target value over 1.5-2.5s with easeOut (fast first, then slow). The JS version interpolates with requestAnimationFrame; the odometer version makes each digit a vertical column of 0-9 and scrolls translateY to the target digit. Always use font-variant-numeric:tabular-nums for equal-width digits to prevent jitter. Formatting notes: thousands separators, currency symbols, a fixed number of decimal places. At the moment a large number finishes, a slight scale bounce can add emphasis.
常见搭配
同一页面里经常和「数字滚动计数」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-odowrap">
<div class="d-odometer">
<span class="d-odometer__d"><span class="d-odometer__c" style="--ty:-34px"><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></span></span>
<span class="d-odometer__d"><span class="d-odometer__c" style="--ty:-238px;animation-delay:.12s"><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></span></span>
<span class="d-odometer__d"><span class="d-odometer__c" style="--ty:-170px;animation-delay:.24s"><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></span></span>
<span class="d-odometer__d"><span class="d-odometer__c" style="--ty:-34px;animation-delay:.36s"><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></span></span>
</div>
<span class="d-odowrap__sub">每月节省的工时（小时）</span>
</div>