html 大屏滚动效果,纯js 实现 大屏数字滚动效果

大屏滚动效果可以使用fullpage.js插件来实现，它可以快速地创建全屏滚动网站效果。如果你想纯js实现大屏数字滚动效果，可以使用以下代码：

HTML代码：

<div id="count-up" class="count-up">
  <span class="number">0</span>
</div>

CSS代码：

.count-up {
  font-size: 48px;
  color: #fff;
  text-align: center;
  margin-top: 100px;
}

JavaScript代码：

// 设置数字增长的起始值和结束值
var startValue = 0;
var endValue = 1000;

// 获取计数器的 DOM 元素
var countUp = document.getElementById('count-up');
var number = countUp.querySelector('.number');

// 设置数字增长的方式和时间
var duration = 5000; // 5秒钟
var interval = 50; // 每50毫秒数字增加一次
var steps = duration / interval;
var stepValue = (endValue - startValue) / steps;

// 定义计数器增长的函数
function countUpNumber() {
  startValue += stepValue;
  if (startValue > endValue) {
    startValue = endValue;
  }
  number.innerHTML = Math.round(startValue);
  if (startValue < endValue) {
    setTimeout(countUpNumber, interval);
  }
}

// 执行数字增长的函数
setTimeout(countUpNumber, interval);

这段代码使用了setTimeout函数来实现数字的增长效果，每隔50毫秒就会增加一次数字，直到达到结束值为止。你可以根据自己的需求来修改时间和数字的起始值和结束值。