【JavaScript】スクロールしたら、スロット風に数字が表示される

2025年12月08日

WEBサイト制作

#HTML
#css
#JavaScript
#tips

こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回はコーポレートサイトなどで使える、
業績や社員数などをかっこよく表示するギミックを紹介します！

実装例

6,314

1,298

HTML例

<div class="number">
    <span data-num="6">6</span>,<span data-num="3">3</span><span data-num="1">1</span><span data-num="4">4</span>
</div>

CSS例

.number{
    text-align: center;
    font-size: 95px;
    font-weight: 500;
}

JavaScript例

function slotOnVisible(selector) {
  var targets = document.querySelectorAll(selector);
  var observer = new IntersectionObserver(function (entries, obs) {
    entries.forEach(function (entry) {
      if (entry.isIntersecting) {
        startSlot(entry.target);
        obs.unobserve(entry.target);
      }
    });
  });
  targets.forEach(el => observer.observe(el));
}
function startSlot(el) {
  var numbers = el.querySelectorAll('span');
  var cash = Array.from(numbers, n => n.getAttribute('data-num'));
  numbers.forEach(function (numEl, i) {
    var count = 0;
    setTimeout(function () {
      var loopId = setInterval(function () {
        numEl.innerText = Math.floor(Math.random() * 10);
        if (++count >= 15) {
          numEl.innerText = cash[i];
          clearInterval(loopId);
        }
      }, 60);
    }, i * 200);
  });
}
slotOnVisible('.number');