Text Effect untuk Efek Text Mengetik dengan CSS | #8 | Mukti911

A. Pendahuluan
Animasi ini juga bisanya sering kita lihat di website-website yang diretas, biasanya siperetas meninggalkan jejak dengan pesan yang seolah-olah sedang diketik.

B. Latar Belakang
Ingin mengeahui bagaimana cara membuat sebuah text dapat seakan akan terketikan.

C. Maksud & Tujuan
agar dapat membuat text dapat terketikkan secara otomatis.

D. Waktu Pelaksanaan

• 10 Menit Tergantung Individu

E. Pembahasan
Bagaimana Membuatnya?
Untuk membuatnya tidak terlalu sulit, cukup beberapa baris kode css maka kita bisa mendapatkan efek ketikan teks tersebut pada website kita.
Kode HTML
Berikut kode HTML yang digunakan :

<p class="text-animate">Website Resmi Mukti911 <a href="http://mukti911-id.blogspot.com"> - mukti911-id.blogspot.com</a></p>

Bisa dilihat disitu kita membuat sebuah class dengan nama .text-animate.

Kode CSS
Untuk kode CSS nya kita menggunakan CSS Animation yang merupakan fitur dari CSS3.

.text-animate {
  font-size: 22px;
  width: 740px;
  white-space:nowrap;
  overflow:hidden;
  -webkit-animation: write 5s steps(50, end);
  animation: write 5s steps(50, end); }
@keyframes write {
    from { width: 0; } }
@-webkit-keyframes write{
    from { width: 0; } }

Bisa dilihat pada kode css diatas kita membuat animasi dengan nama write dan mengatur animasi nya pada keyframe.

Selanjutnya tambahkan overflow:hidden sehingga ketika animasi mengubah ukuran paragraf ke 0 kita tidak akan dapat melihat teks. Akhirnya kita dapat menambahkan animasi ketik dengan fungsi steps()

Animasi akan meningkatkan ukuran paragraf dari 0 sampai 740px, dalam 50 frame sehingga menciptakan efek bahwa teks yang sedang diketik.

Lihat Hasil

F. Hasil yang didapat

• Dapat membuat text menjadi seperti terketikkan. 

G. Kesimpulan

Jadi sebenarnya sangat simple sekali cara untuk membuat text seperti terketikan. padahal jika dilihat dari pemakaiannya biasanya digunakan oleh seorang hacker.

H. Referensi

• www.w3school.com