Счётчик чисел
классика лендингов Шторки clip-path →

Появление текста

Счётчик чисел

Числа набегают от нуля при попадании в кадр, по ease-out — быстро в начале, мягко в конце.

Доскрольте до цифр.

0сайта разобрано
0эффектов
0lighthouse
0год
Код
<b class="cnt" data-to="128">0</b>

<script>
function runCount(el) {
  var to = +el.getAttribute("data-to"), t0 = null;
  function tick(t) {
    if (!t0) t0 = t;
    var p = Math.min((t - t0) / 1200, 1);    // 1.2 секунды
    var e = 1 - Math.pow(1 - p, 3);          // ease-out cubic
    el.textContent = Math.round(to * e);
    if (p < 1) requestAnimationFrame(tick);
  }
  requestAnimationFrame(tick);
}
new IntersectionObserver(function (es, io) {
  es.forEach(function (e) {
    if (!e.isIntersecting) return;
    runCount(e.target); io.unobserve(e.target);
  });
}, { threshold: .6 }).observe(document.querySelector(".cnt"));
</script>

<style>.cnt { font-variant-numeric: tabular-nums; }</style>
Промпт для ИИ
Добавь счётчики чисел: элементы с data-to стартуют с 0 и набегают до цели за 1.2s при появлении в кадре (IntersectionObserver threshold 0.6, одноразово). Кривая ease-out-cubic: value = target * (1 - (1-p)^3), через requestAnimationFrame. Обязательно font-variant-numeric: tabular-nums. При prefers-reduced-motion сразу финальное число.