You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
63 lines
2.5 KiB
63 lines
2.5 KiB
<div class="about-features-section" id="about-features">
|
|
<div class="about-features-container">
|
|
<!-- 统计数据展示 -->
|
|
<div class="about-features-stats">
|
|
<div class="about-features-stat-item">
|
|
<div class="text-[48px] text-white font-bold mb-2"> <span class="about-counter" data-target="100">0</span>+</div>
|
|
<div class="about-stat-label">技术研发人员</div>
|
|
</div>
|
|
|
|
<div class="about-features-stat-item">
|
|
<div class="text-[48px] text-white font-bold mb-2"> <span class="about-counter" data-target="400">0</span>+</div>
|
|
<div class="about-stat-label">中大型电力工程</div>
|
|
</div>
|
|
|
|
<div class="about-features-stat-item">
|
|
<div class="text-[48px] text-white font-bold mb-2"> <span class="about-counter" data-target="1.2">0</span>Gwp+</div>
|
|
<div class="about-stat-label">自持及代运营电站</div>
|
|
</div>
|
|
|
|
<div class="about-features-stat-item">
|
|
<div class="text-[48px] text-white font-bold mb-2"> <span class="about-counter" data-target="10">0</span>Gwp+</div>
|
|
<div class="about-stat-label">光伏电站业绩</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const counters = document.querySelectorAll('.about-counter');
|
|
const speed = 200; // The lower the slower
|
|
|
|
const animateCounters = () => {
|
|
counters.forEach(counter => {
|
|
const updateCount = () => {
|
|
const target = +counter.getAttribute('data-target');
|
|
const count = +counter.innerText;
|
|
const inc = target / speed;
|
|
console.log(count, target, inc);
|
|
if (count < target) {
|
|
counter.innerText = Math.ceil(count + inc);
|
|
setTimeout(updateCount, 20); // Update speed
|
|
} else {
|
|
counter.innerText = target;
|
|
}
|
|
};
|
|
updateCount();
|
|
});
|
|
};
|
|
|
|
// Trigger animation when section is in view
|
|
let hasAnimated = false;
|
|
|
|
const section = document.querySelector('#about-features');
|
|
const observer = new IntersectionObserver((entries) => {
|
|
if(entries[0].isIntersecting && !hasAnimated) {
|
|
animateCounters();
|
|
hasAnimated = true;
|
|
}
|
|
}, { threshold: 0.5 });
|
|
|
|
if(section) {
|
|
observer.observe(section);
|
|
}
|
|
</script> |