MErhaba, cevabınız için teşekkür ederim ben de şu şekilde çözmüştüm, cevabı atıyorum belki farklı yer arkadaşların işine yarar.
import { onMount } from 'svelte';
onMount(() => {
const counterElements = document.querySelectorAll('.number');
const options = {
threshold: 0.5, // Ekranda görünme yüzdesi
};
const callback = (entries: any[], observer: any) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const target = entry.target;
const finalNumber = parseInt(target.getAttribute('data-number'));
const duration = 1300; // Animasyon süresi (ms)
animateNumber(target, finalNumber, duration);
}
});
};
const animateNumber = (element: { textContent: number; }, finalNumber: number, duration: number) => {
let currentNumber = 0;
const increment = finalNumber / (duration / 16); // Her 16ms'de bir artış miktarı (16ms ≈ 1 kare)
const interval = setInterval(() => {
currentNumber += increment;
element.textContent = Math.floor(currentNumber);
if (currentNumber >= finalNumber) {
element.textContent = finalNumber;
clearInterval(interval);
}
}, 16);
};
const observer = new IntersectionObserver(callback, options);
counterElements.forEach((element) => {
observer.observe(element);
});
});