Odometer — Design Vault

A still — with scripts on, it runs right here

Odometer — Odometer digit roll Build a four-digit number as an odometer, where each digit rolls vertically on its own reel and settles. Each digit is a window one row high (overflow: hidden) holding a strip of 0–9 stacked vertically, and the strip moves with transform: translateY to "final digit × −10%". Each reel takes 1.2 seconds with cubic-bezier(.2, .7, .2, 1), and the digits stop in order from the left, each delayed by 120ms. Start once, when 50% of the section is inside the viewport, and never rewind on scrolling back. Use font-variant-numeric: tabular-nums for the digits and put the final value in an aria-label as well. Implement it with CSS transitions and IntersectionObserver only, without any library. Do not drop: - Move a 0–9 strip per digit with transform; do not count by rewriting text - Stop the digits 120ms apart from the left, never all at once - Roll once on entering the viewport; a settled number stays put - Without JavaScript or with reduced motion, show the final value at rest A working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-odometer-roll/demo.html

<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>29 オドメーター — Odometer digit roll</title> <style> /* dv-motion-base:start */ :root { --ground: #FFFFFF; --surface: #F3F5F8; --ink: #14181F; --muted: #5A6472; --accent: #1F5FA8; --rule: #D8DDE4; --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--ground)); --accent-mid: color-mix(in srgb, var(--accent) 45%, var(--ground)); --shade: color-mix(in srgb, var(--ink) 14%, transparent); --font: "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", system-ui, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --t-label: 13px; --t-body: 16px; --t-lead: 20px; --t-h2: 32px; --t-h1: clamp(40px, 7vw, 72px); --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 40px; --s6: 64px; --s7: 104px; --radius: 12px; --ease: cubic-bezier(.2, .7, .2, 1); --dur: .7s; --measure: 1080px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font); font-size: var(--t-body); line-height: 1.7; font-feature-settings: "palt"; overflow-x: hidden; } h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; } ul, ol { list-style: none; } .dv-wrap { width: min(100% - 2 * var(--s4), var(--measure)); margin-inline: auto; } .dv-label { min-height: 72vh; display: grid; align-content: center; gap: var(--s3); padding-block: var(--s6); border-bottom: 1px solid var(--rule); } .dv-num { font-family: var(--mono); font-size: var(--t-lead); font-weight: 700; color: var(--accent); letter-spacing: .04em; } .dv-name { font-size: var(--t-h1); font-weight: 700; line-height: 1.15; letter-spacing: .01em; } .dv-ai { font-family: var(--mono); font-size: var(--t-lead); color: var(--muted); } .dv-desc { font-size: var(--t-lead); color: var(--ink); } .dv-hint { font-size: var(--t-label); color: var(--muted); letter-spacing: .12em; margin-top: var(--s4); } .dv-stage { padding-block: var(--s7); } .dv-h2 { font-size: var(--t-h2); font-weight: 700; line-height: 1.3; } .dv-lead { font-size: var(--t-lead); color: var(--muted); } .dv-eyebrow { font-family: var(--mono); font-size: var(--t-label); color: var(--accent); letter-spacing: .12em; text-transform: uppercase; } .dv-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--s4); } .dv-ph { border-radius: var(--radius); background: linear-gradient(135deg, var(--accent-soft), var(--accent-mid) 60%, var(--accent)); aspect-ratio: 16 / 9; } .dv-ph--alt { background: linear-gradient(200deg, var(--surface), var(--accent-soft) 55%, var(--accent-mid)); } .dv-ph--ink { background: linear-gradient(160deg, var(--ink), color-mix(in srgb, var(--ink) 55%, var(--accent))); } .dv-end { min-height: 60vh; display: grid; place-items: center; border-top: 1px solid var(--rule); color: var(--muted); font-family: var(--mono); font-size: var(--t-label); letter-spacing: .12em; } /* dv-motion-base:end */ /* ---- この演出だけの CSS。色は var(--…) か color-mix() のみ ---- */ .beat { min-height: 72vh; display: grid; align-content: center; justify-items: start; gap: var(--s3); } .odo-row { display: flex; align-items: flex-end; gap: var(--s3); } .odo { display: flex; gap: var(--s2); font-size: clamp(56px, 15vw, 152px); font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; } /* 桁の窓。高さは 1 段ぶん（em で決める）で、はみ出した段を隠す */ .digit { position: relative; display: block; height: 1.15em; padding-inline: .14em; overflow: hidden; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); } .digit::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--shade), transparent 24%, transparent 76%, var(--shade)); pointer-events: none; } /* 0〜9 の縦並び。10 段なので、1 段は自身の高さの 10% */ .reel { display: block; transform: translateY(calc(var(--d) * -10%)); } .reel > span { display: block; height: 1.15em; text-align: center; } .unit { font-size: var(--t-h2); font-weight: 700; line-height: 1.3; padding-bottom: .5em; } /* 最大 9 段を送るので、共通の --dur（0.7 秒）では数字が読めない速さになる。1.2 秒にする */ .js .reel { transform: none; transition: transform 1.2s var(--ease) calc(var(--i) * 120ms); will-change: transform; } .js .beat.is-in .reel { transform: translateY(calc(var(--d) * -10%)); } @media (prefers-reduced-motion: reduce) { .js .reel { transform: translateY(calc(var(--d) * -10%)); transition: none; } } </style> </head> <body data-motion-number="29"> <header class="dv-label"> <div class="dv-wrap"> 29 <h1 class="dv-name">オドメーター</h1> Odometer digit roll 桁ごとに数字が回って止まる SCROLL ↓ </div> </header> <main class="dv-stage"> <section class="dv-wrap beat"> Counter 01 0123456789 0123456789 0123456789 0123456789 件 項目の説明が入ります。 </section> <section class="dv-wrap beat"> Counter 02 0123456789 0123456789 0123456789 0123456789 回 項目の説明が入ります。 </section> <section class="dv-wrap beat"> Counter 03 0123456789 0123456789 0123456789 0123456789 点 項目の説明が入ります。 </section> </main> <footer class="dv-end">END — 29 オドメーター</footer> <script> /* dv-motion-helpers:start */ const dvReduce = matchMedia('(prefers-reduced-motion: reduce)').matches; document.documentElement.classList.add('js'); /** * 画面に入った要素へ .is-in を付ける。 * data-reveal="repeat" の要素は画面を出たら外す（何度でも再生）。 */ function dvReveal(selector = '[data-reveal]', { threshold = 0.2, rootMargin = '0px 0px -8% 0px' } = {}) { const els = [...document.querySelectorAll(selector)]; if (dvReduce || !('IntersectionObserver' in window)) { els.forEach((el) => el.classList.add('is-in')); return; } const io = new IntersectionObserver((entries) => { for (const e of entries) { if (e.isIntersecting) { e.target.classList.add('is-in'); if (e.target.dataset.reveal !== 'repeat') io.unobserve(e.target); } else if (e.target.dataset.reveal === 'repeat') { e.target.classList.remove('is-in'); } } }, { threshold, rootMargin }); els.forEach((el) => io.observe(el)); } /** * スクロール量を 0〜1 にして、各 [data-progress] 要素の CSS 変数 --p に書く。 * data-progress="through" : 要素の上端が画面の下端に来たとき 0、下端が画面の上端を抜けたとき 1 * data-progress="pin" : 要素の上端が画面の上端に来たとき 0、下端が画面の下端に来たとき 1 * （中に position: sticky の箱を持つ、背の高い区画用） * data-progress="page" : ページ全体のスクロール量 * onUpdate(el, p) を渡すと、値が変わるたびに呼ばれる。 */ function dvProgress(onUpdate) { const els = [...document.querySelectorAll('[data-progress]')]; const clamp = (n) => Math.min(1, Math.max(0, n)); let queued = false; const measure = () => { queued = false; const vh = window.innerHeight; for (const el of els) { const r = el.getBoundingClientRect(); let p; if (el.dataset.progress === 'pin') p = r.height > vh ? -r.top / (r.height - vh) : 0; else if (el.dataset.progress === 'page') { const max = document.documentElement.scrollHeight - vh; p = max > 0 ? window.scrollY / max : 0; } else p = (vh - r.top) / (vh + r.height); p = clamp(p); el.style.setProperty('--p', p.toFixed(4)); if (onUpdate) onUpdate(el, p); } }; const request = () => { if (!queued) { queued = true; requestAnimationFrame(measure); } }; addEventListener('scroll', request, { passive: true }); addEventListener('resize', request); measure(); } /* dv-motion-helpers:end */ /* ---- この演出だけの JS ---- */ // 区画が半分入ったら一度だけ .is-in を付ける。桁ごとの時間差は CSS の --i が作る。 dvReveal('.beat', { threshold: 0.5, rootMargin: '0px' }); </script> </body> </html>

29 Odometer

Take it with you

Everything

Prompt

Files

demo.html