源码:
两种递增分别是:
1、百分数递增
2、数字递增后添加文案
<div style="height: 1500px;"></div>
<p class="number-module2" data-start="0" data-end="90" data-duration="1000">0%</p>
<p class="number-module3" data-start="0" data-end="2" data-duration="1000">0</p>
<p class="number-module1" data-start="0" data-end="200" data-duration="1000">0</p>
<div style="height: 500px;"></div>
<script>
// w+
document.addEventListener("DOMContentLoaded", function() {
const numberModules1 = document.querySelectorAll('.number-module1');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const module = entry.target;
const start = parseInt(module.getAttribute('data-start'), 10);
const end = parseInt(module.getAttribute('data-end'), 10);
const duration = parseInt(module.getAttribute('data-duration'), 10);
animateNumber1(module, start, end, duration, 'w+');
// 如果你只想触发一次动画,可以取消观察
observer.unobserve(module);
}
});
});
numberModules1.forEach(module => observer.observe(module));
});
function animateNumber1(element, start, end, duration, suffix = '') {
let startTime = null;
const animation1 = function(currentTime) {
if (startTime === null) startTime = currentTime;
const progress = Math.min((currentTime - startTime) / duration, 1);
const value = Math.floor(progress * (end - start) + start);
element.textContent = value.toString();
if (progress < 1) {
requestAnimationFrame(animation1);
} else {
// 动画结束时添加 w+
element.textContent += suffix;
}
};
requestAnimationFrame(animation1);
}
// /
document.addEventListener("DOMContentLoaded", function() {
const numberModules3 = document.querySelectorAll('.number-module3');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const module = entry.target;
const start = parseInt(module.getAttribute('data-start'), 10);
const end = parseInt(module.getAttribute('data-end'), 10);
const duration = parseInt(module.getAttribute('data-duration'), 10);
animateNumber3(module, start, end, duration, '/3');
// 如果你只想触发一次动画,可以取消观察
observer.unobserve(module);
}
});
});
numberModules3.forEach(module => observer.observe(module));
});
function animateNumber3(element, start, end, duration, suffix = '') {
let startTime = null;
const animation3 = function(currentTime) {
if (startTime === null) startTime = currentTime;
const progress = Math.min((currentTime - startTime) / duration, 1);
const value = Math.floor(progress * (end - start) + start);
element.textContent = value.toString();
if (progress < 1) {
requestAnimationFrame(animation3);
} else {
// 动画结束时添加 /3
element.textContent += suffix;
}
};
requestAnimationFrame(animation3);
}
// %
document.addEventListener("DOMContentLoaded", function() {
const numberModules2 = document.querySelectorAll('.number-module2');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const module = entry.target;
const start = parseInt(module.getAttribute('data-start'), 10);
const end = parseInt(module.getAttribute('data-end'), 10);
const duration = parseInt(module.getAttribute('data-duration'), 10);
animateNumber2(module, start, end, duration);
// 如果你只想触发一次动画,可以取消观察
observer.unobserve(module);
}
});
});
numberModules2.forEach(module => observer.observe(module));
});
function animateNumber2(element, start, end, duration) {
let startTime = null;
const animation2 = function(currentTime) {
if (startTime === null) startTime = currentTime;
const progress = Math.min((currentTime - startTime) / duration, 1);
const value = Math.floor(progress * (end - start) + start);
// 将值转换为百分数并更新元素文本
element.textContent = value + '%';
if (progress < 1) {
requestAnimationFrame(animation2);
}
};
requestAnimationFrame(animation2);
}
</script>