Membuat Efek Text Mengetik Dengan CSS

Efek Text Mengetik Dengan CSS

Kalian tentu pernah melihat berbagai efek animasi pada halaman website, termasuk salah satunya efek mengetik teks.

Efek ketikan teks ini biasanya sering muncul pada bagian news ticker di website berita, atau pada halaman website yang terkena hack.

Efek mengetik teks seperti itu biasanya dibuat dengan bantuan JavaScript, namun kali ini Saya akan mencoba membuatnya hanya dengan CSS saja, yaitu dengan fitur animasi di CSS.

HTML

Pertama buat terlebih dahulu tulisan yang akan dibuat animasinya, kita cukup menaruhnya pada sebuah div yang diberi nama class  .mengetik.

<p class="mengetik">Hallo, selamat datang...</p>

CSS Kemudian kita tambahkan kode CSS untuk membuat animasi efek mengetik teks seperti berikut ini

.mengetik{ width: 700px; white-space: nowrap; overflow: hidden; font-size: 17px; animation: ketik 5s steps(500, end) infinite; } @keyframes ketik{ from { width: 0; } } @keyframes ketik{ from { width: 0; } }

Terlihat di situ kita menggunakan animasi dengan nama mengetik yang di panggil dari class CSS .mengetik

Downlaod Script & Demo

Jika Anda tertarik ingin mencoba bisa melihat demo dan mendownload script nya dibawah!.  Semoga trik singkat ini bermanfaat untuk meningkatkan skill CSS kalian ya..