MoreLesson 264Preview gratis
Typewriter
Lesson ini bagian dari How To · Semua level
Ringkasan
Efek typewriter menampilkan teks satu karakter demi satu karakter sehingga terasa seperti sedang diketik. JavaScript mengambil potongan string dengan slice() dan memperbaruinya memakai setTimeout atau setInterval. Tambahkan kursor berkedip lewat CSS, tetapi jangan jadikan efek ini satu-satunya cara menyampaikan informasi penting.
Poin kunci
- slice(0, i) mengambil sebagian teks sesuai posisi karakter yang sedang diketik.
- setTimeout rekursif memberi jeda antar karakter dan lebih mudah dihentikan.
- Kursor berkedip dapat dibuat dengan pseudo-element dan animasi CSS.
- Efek mengetik sebaiknya tidak dipakai untuk konten penting dan harus menghormati reduced motion.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.