Membuat Animasi Efek Mengetik Teks Dengan CSS

Animasi mengetik teks biasanya dibuat dengan bantuan Jquery, namun pada artikel kali ini kita akan mencoba membuatnya hanya dengan CSS.

Animasi ini tentunya bisa digunakan jika ingin membuat semacam presentasi di website, atau untuk sekedar mempercantik halaman website.

Ilustrasi Mengetik, credit photo by Janelene Juanillo

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

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="wadah-mengetik">Welcome to Tutorial Web Design Indonesia | <a href="http://www.tutorial-webdesign.com">http://www.tutorial-webdesign.com</a></p>

Bisa dilihat disitu kita membuat sebuah class dengan nama .wadah-mengetik.

Kode CSS

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

.wadah-mengetik
{
	font-size: 22px;
	width: 740px;
	white-space:nowrap;
	overflow:hidden;
	-webkit-animation: ketik 5s steps(50, end);
	animation: ketik 5s steps(50, end);
}

@keyframes ketik{
		from { width: 0; }
}

@-webkit-keyframes ketik{
		from { width: 0; }
}

Bisa dilihat pada kode css diatas kita membuat animasi dengan nama ketik 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.

DEMO | DOWNLOAD CODE

Sekian tutorial kali ini, semoga menambah wawasan dan meningkatkan skill kita semua.

Salam Web Design Indonesia.

TWD Editorial

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

9 thoughts on “Membuat Animasi Efek Mengetik Teks Dengan CSS”

ardesain says:

February 10, 2014 at 10:15

tutorialnya kurang jelas, tolong diberikan penjelasan tentang fungsi masing2 tag :)

TWD Editorial says:

February 10, 2014 at 10:25

Coba ketik sendiri baris demi baris sambil lihat hasilnya, nanti akan mengerti sendiri fungsi masing-masing tag.
Kalau bingung coba gooling tentang fungsi-fungsi yang membingungkan tersebut.
Begitu kira-kira cara belajar yang efektif :)

Reply

Rangga says:

February 10, 2014 at 10:46

Keren min tutorialnya, fitur baru CSS3 makin mantap deh haha :D

ramram says:

April 3, 2014 at 21:42

untuk tying berkelanjutan misal sampe beberapakalimat gmna caranya bos ?? :D

Stop War says:

October 5, 2014 at 06:15

iya bener. kalo teksnya segitu kepotong. kalo buat bikin panjang tulisannya gimana tuh? misalnya 12 BAB. haha

Reply

Stop War says:

October 7, 2014 at 03:57

ini yang posting artikel kmna sih? cuman bisa posting doang gak ngasih refensi.

TWD Editorial says:

October 7, 2014 at 09:01

Ini bukan penulisan ilmiah jadi tidak perlu referensi seperti nya

Reply

Tukang Belajar says:

December 14, 2014 at 20:29

Hmm, keren mas! bagaimana kalau animasinya jalan terus gitu bisa kan?

Tukang nanya says:

October 29, 2017 at 17:09

permisi min, mw nanya ane, kalo teksnya mw d looping gmna ya?

Tutorial Web Design

Topik

Tags