htmlcssjavascriptanimasistatistikMenengah9 mnt baca

Counter Angka Animasi

Angka statistik yang menghitung naik dari 0 saat terlihat, seperti di halaman company profile.

Efek Statistik yang Hidup

Halaman company profile sering menampilkan "10.000+ Pengguna", "500+ Klien" dengan angka yang menghitung naik dari nol saat terlihat. Efek ini membuat angka terasa "nyata" dan menarik perhatian.

Langkah Membangun

HTML: Beberapa <div class="stat"> berisi <span class="angka" data-target="10000">0</span> dan label. Target akhir disimpan di data-target.

CSS: Tampilan besar dan tebal untuk angka, label kecil di bawahnya. Grid untuk menata beberapa statistik sejajar.

JS: Gabungkan dua teknik yang sudah dipelajari:

  1. IntersectionObserver mendeteksi saat statistik terlihat.
  2. Animasi menghitung: dari 0 ke target selama 2 detik memakai requestAnimationFrame.

requestAnimationFrame adalah cara browser untuk animasi mulus: fungsi dipanggil sebelum setiap frame layar (60x per detik). Hitung progres = waktu berlalu / durasi, lalu nilai = target × progres. Pakai easing (1 - (1-p)^2) agar melambat di akhir seperti mobil mengerem.

Format angka Indonesia dengan toLocaleString("id-ID") agar 10000 tampil sebagai "10.000".

Kesalahan Umum

  • Memakai setInterval dengan interval tetap sehingga animasi tidak mulus di layar 120Hz (requestAnimationFrame mengikuti refresh rate).
  • Counter jalan sebelum terlihat sehingga pengguna melewatkan animasinya (picu dengan observer).
  • Angka desimal berantakan (bulatkan dengan Math.floor selama animasi).
Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Suffix K/M

Tampilkan angka besar dengan suffix: 1500 menjadi "1,5 rb", 2500000 menjadi "2,5 jt". Buat fungsi formatSingkat(n) dan pakai di counter.

Kuis Bab

Uji pemahamanmu: Galeri & Efek Scroll

Jawab 5 soal berikut, lalu tekan "Periksa Jawaban".

1.Satu baris CSS Grid apa yang membuat galeri otomatis menyesuaikan jumlah kolom?

2.Bagaimana cara menggeser slide di carousel dengan CSS?

3.Kenapa IntersectionObserver lebih baik daripada event scroll untuk animasi reveal?

4.Rumus apa yang menghitung persen scroll halaman?

5.Fungsi browser apa yang menghasilkan animasi counter paling mulus?