מספרים שרצים

המספר הסופי כתוב בתוך ה-HTML ולא מוזרק בסוף האנימציה. כך מי שמגיע עם תנועה מופחתת, בלי JavaScript או עם קורא מסך רואה את הערך האמיתי, והאנימציה רק מחליפה אותו לרגע. מספרים שרצים הוא רכיב מתוך רכיבים של כליקס. מה שמורידים הוא רכיב שלם, גם כ-HTML עצמאי וגם כרכיב React. אין ספרייה חיצונית, אין שלב בנייה, ואם כליקס ייעלם מחר הקוד ימשיך לעבוד.

רכיב · אודות · גלילה · בלי ספריות

<!-- מספרים שרצים — הערך הסופי כתוב בתוך התגית, וזה מה שיישאר בלי JS -->
<style>
  .klix-stats { display: flex; gap: 2rem; text-align: center }
  .klix-stats b { display: block; font-size: 2.25rem; font-weight: 900;
    font-variant-numeric: tabular-nums }
  .klix-stats small { color: #94a3b8 }
</style>

<div class="klix-stats">
  <div><b class="klix-count" data-suffix="+">1200</b><small>לקוחות</small></div>
  <div><b class="klix-count" data-suffix="%">98</b><small>שביעות רצון</small></div>
  <div><b class="klix-count">15</b><small>שנות ניסיון</small></div>
</div>

<script>
(function () {
  var DURATION = 1400;   // אורך הריצה במילישניות

  var els = document.querySelectorAll('.klix-count');
  if (!els.length) return;
  if (!('IntersectionObserver' in window) ||
      window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;

  var io = new IntersectionObserver(function (entries) {
    entries.forEach(function (entry) {
      if (!entry.isIntersecting) return;
      io.unobserve(entry.target);
      run(entry.target);
    });
  });

  function run(el) {
    var to = parseFloat(el.textContent.replace(/[^\d.]/g, '')) || 0;
    var suffix = el.getAttribute('data-suffix') || '';
    var start = performance.now();

    function step(now) {
      var t = Math.min(1, (now - start) / DURATION);
      // האטה לקראת הסוף. ריצה לינארית נראית כמו טעינה ולא כמו הישג
      var v = Math.round(to * (1 - Math.pow(1 - t, 3)));
      el.textContent = v.toLocaleString('he-IL') + suffix;
      if (t < 1) requestAnimationFrame(step);
    }
    requestAnimationFrame(step);
  }

  els.forEach(function (el) { io.observe(el); });
})();
</script>