forked from izu/student-web-if-development-kit
fix:Nambah animasi statistik counter
This commit is contained in:
@@ -2178,6 +2178,55 @@
|
|||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
(function () {
|
||||||
|
const stats = [
|
||||||
|
{ id: 'stat-pub', target: 400, suffix: '+', decimals: 0 },
|
||||||
|
{ id: 'stat-sinta', target: 7555, suffix: '', decimals: 0, format: 'dot-thousands' },
|
||||||
|
{ id: 'stat-dosen', target: 33, suffix: '', decimals: 0 },
|
||||||
|
{ id: 'stat-collab', target: 10, suffix: '+', decimals: 0 },
|
||||||
|
{ id: 'stat-mhs', target: 518, suffix: '', decimals: 0 },
|
||||||
|
];
|
||||||
|
|
||||||
|
function easeOutQuart(t) {
|
||||||
|
return 1 - Math.pow(1 - t, 4);
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatValue(value, fmt) {
|
||||||
|
if (fmt === 'dot-thousands') {
|
||||||
|
return Math.floor(value).toLocaleString('id-ID');
|
||||||
|
}
|
||||||
|
return Math.floor(value).toString();
|
||||||
|
}
|
||||||
|
|
||||||
|
function animateStat(el, target, suffix, fmt, duration) {
|
||||||
|
const start = performance.now();
|
||||||
|
function step(now) {
|
||||||
|
const elapsed = now - start;
|
||||||
|
const progress = Math.min(elapsed / duration, 1);
|
||||||
|
const current = easeOutQuart(progress) * target;
|
||||||
|
el.textContent = formatValue(current, fmt) + suffix;
|
||||||
|
if (progress < 1) requestAnimationFrame(step);
|
||||||
|
}
|
||||||
|
requestAnimationFrame(step);
|
||||||
|
}
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver(function (entries) {
|
||||||
|
entries.forEach(function (entry) {
|
||||||
|
if (!entry.isIntersecting) return;
|
||||||
|
observer.unobserve(entry.target);
|
||||||
|
stats.forEach(function (s) {
|
||||||
|
const el = document.getElementById(s.id);
|
||||||
|
if (el) animateStat(el, s.target, s.suffix, s.format, 1800);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}, { threshold: 0.3 });
|
||||||
|
|
||||||
|
const section = document.querySelector('#stat-pub');
|
||||||
|
if (section) observer.observe(section.closest('section'));
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user