fix:Nambah animasi statistik counter
This commit is contained in:
@@ -2178,6 +2178,55 @@
|
||||
}
|
||||
})();
|
||||
</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>
|
||||
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user