61 lines
1.6 KiB
JavaScript
61 lines
1.6 KiB
JavaScript
export default class Counter {
|
|
constructor(element) {
|
|
this.element = element
|
|
this.target = parseFloat(element.dataset.target)
|
|
this.decimal = element.dataset.decimal === 'true'
|
|
this.duration = 2000
|
|
this.startTime = null
|
|
|
|
this.init()
|
|
}
|
|
|
|
init() {
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
this.animate()
|
|
observer.unobserve(this.element)
|
|
}
|
|
})
|
|
}, { threshold: 0.5 })
|
|
|
|
observer.observe(this.element)
|
|
}
|
|
|
|
animate() {
|
|
const startValue = 0
|
|
const startTime = performance.now()
|
|
|
|
const updateCounter = (currentTime) => {
|
|
const elapsedTime = currentTime - startTime
|
|
const progress = Math.min(elapsedTime / this.duration, 1)
|
|
|
|
// Easing function for smooth animation
|
|
const easeOutQuart = 1 - Math.pow(1 - progress, 4)
|
|
|
|
let currentValue = startValue + (this.target - startValue) * easeOutQuart
|
|
|
|
if (this.decimal && this.target < 10) {
|
|
currentValue = currentValue.toFixed(1)
|
|
} else {
|
|
currentValue = Math.floor(currentValue)
|
|
}
|
|
|
|
this.element.textContent = currentValue
|
|
|
|
if (progress < 1) {
|
|
requestAnimationFrame(updateCounter)
|
|
} else {
|
|
this.element.textContent = this.decimal && this.target < 10 ? this.target.toFixed(1) : this.target
|
|
}
|
|
}
|
|
|
|
requestAnimationFrame(updateCounter)
|
|
}
|
|
}
|
|
|
|
// Initialize all counters
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const counters = document.querySelectorAll('.counter')
|
|
counters.forEach(counter => new Counter(counter))
|
|
}) |