// +
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, '%');
// 如果你只想触发一次动画，可以取消观察
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 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);
animateNumber1(module, start, end, duration, '+');
// 如果你只想触发一次动画，可以取消观察
observer.unobserve(module);
}
});
});
numberModules2.forEach(module => observer.observe(module));
});
function animateNumber2(element, start, end, duration, suffix = '+') {
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.toString();
if (progress < 1) {
requestAnimationFrame(animation2);
} else {
// 动画结束时添加 w+
element.textContent += suffix;
}
};
requestAnimationFrame(animation2);
}
// +
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, '+');
// 如果你只想触发一次动画，可以取消观察
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 numberModules0 = document.querySelectorAll('.number-module0');
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);
animateNumber0(module, start, end, duration, 'million pieces');
// 如果你只想触发一次动画，可以取消观察
observer.unobserve(module);
}
});
});
numberModules0.forEach(module => observer.observe(module));
});
function animateNumber0(element, start, end, duration, suffix = 'million pieces') {
let startTime = null;
const animation0 = 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(animation0);
} else {
// 动画结束时添加
element.textContent += suffix;
}
};
requestAnimationFrame(animation0);
}
