前端大屏数字滚动效果

2023-10-09 05:16:25

如何实现前端大屏数字滚动效果？

简介

大屏数字滚动效果是一种常见的交互式设计元素，可用于显示动态且引人注目的数据或信息。它经常用于仪表盘、数字标牌和交互式数据可视化中。在本教程中，我们将介绍如何使用现代前端技术实现这种效果。

HTML 结构

首先，我们需要设置一个 HTML 结构来容纳我们的数字和滚动效果。创建一个 HTML 文档并添加以下代码：

<div class="container">
  <div class="number-wrapper">
    <span class="number" id="number"></span>
  </div>
</div>

<container> 元素将包含整个效果，<number-wrapper> 元素将容纳我们的数字，<span> 元素带有 id="number" 将容纳实际的数字。

CSS 样式

接下来，让我们应用一些 CSS 样式来美化我们的数字并创建滚动效果。将以下代码添加到您的 CSS 文件中：

.container {
  width: 500px;
  height: 500px;
  background-color: #333;
}

.number-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 60px;
  font-weight: bold;
  color: #fff;
}

这些样式设置了容器的尺寸和背景颜色，并对数字及其容器进行了定位。

JavaScript 代码

现在是实现滚动效果的 JavaScript 部分了。我们将使用 CSS 动画来平滑地更改数字。在您的 JavaScript 文件中添加以下代码：

const number = document.getElementById("number");

let currentNumber = 0;
let targetNumber = 1000;
let duration = 1000;

function animateNumber() {
  const timeStart = performance.now();
  requestAnimationFrame(animateNumberFrame);

  function animateNumberFrame(time) {
    const timeElapsed = time - timeStart;
    const progress = timeElapsed / duration;

    number.textContent = Math.round(currentNumber + (targetNumber - currentNumber) * progress);

    if (progress < 1) {
      requestAnimationFrame(animateNumberFrame);
    } else {
      number.textContent = targetNumber;
    }
  }
}

animateNumber();

这段代码获取数字元素的引用并设置其初始值和目标值。它使用 requestAnimationFrame 函数以 60fps 的速度调用 animateNumberFrame 函数。在 animateNumberFrame 函数中，我们计算动画进度并更新数字。动画将一直运行，直到达到目标数字。

完整代码

以下是实现大屏数字滚动效果的完整代码：

<!DOCTYPE html>
<html>
<head>
  
  <style>
    .container {
      width: 500px;
      height: 500px;
      background-color: #333;
    }
    
    .number-wrapper {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      font-size: 60px;
      font-weight: bold;
      color: #fff;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="number-wrapper">
      <span class="number" id="number"></span>
    </div>
  </div>

  <script>
    const number = document.getElementById("number");

    let currentNumber = 0;
    let targetNumber = 1000;
    let duration = 1000;

    function animateNumber() {
      const timeStart = performance.now();
      requestAnimationFrame(animateNumberFrame);

      function animateNumberFrame(time) {
        const timeElapsed = time - timeStart;
        const progress = timeElapsed / duration;

        number.textContent = Math.round(currentNumber + (targetNumber - currentNumber) * progress);

        if (progress < 1) {
          requestAnimationFrame(animateNumberFrame);
        } else {
          number.textContent = targetNumber;
        }
      }
    }

    animateNumber();
  </script>
</body>
</html>