Появление текста
Счётчик чисел
Числа набегают от нуля при попадании в кадр, по 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 сразу финальное число.