Sayaç Animasyonu

<style>
.counter-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 30px 0;
}

.counter-box {
  text-align: center;
  padding: 20px;
  width: 160px;
}

.counter {
  font-size: 40px;
  font-weight: bold;
  color: #5264AE;
  margin-bottom: 10px;
}

.counter-text {
  font-size: 16px;
  color: #666;
}
</style>

<div class="counter-container">
  <div class="counter-box">
    <div class="counter" data-target="1500">0</div>
    <div class="counter-text">Mutlu Müşteri</div>
  </div>
  <div class="counter-box">
    <div class="counter" data-target="500">0</div>
    <div class="counter-text">Tamamlanan Proje</div>
  </div>
  <div class="counter-box">
    <div class="counter" data-target="50">0</div>
    <div class="counter-text">Ödül</div>
  </div>
</div>

<script>
const counters = document.querySelectorAll(".counter");

counters.forEach(counter => {
  const target = +counter.getAttribute("data-target");
  const increment = target / 100;
  
  const updateCounter = () => {
    const count = +counter.innerText;
    if (count < target) {
      counter.innerText = Math.ceil(count + increment);
      setTimeout(updateCounter, 10);
    } else {
      counter.innerText = target;
    }
  };
  
  updateCounter();
});
</script>