Blog Request tutorial? klik disini!

  • Membuat Animasi Mengetik Teks Dengan CSS

    Ditulis oleh: Faizal Rafik
    2089 kali dibaca
    19 Apr / 2014 20:14

    Hallo teman-teman, dalam Tutorial kali ini saya akan membahas bagaimana cara nya membuat animasi mengetik teks dengan CSS. Biasanya animasi mengetik teks seperti ini di buat dengan bantuan jQuery tetapi dalam tutorial kali ini saya akan mengajarkan membuatnya tanpa bantuan jQuery. Animasi seperti ini biasanya di buat untuk persentasi di Website atau hanya sekedar mempercantik tampilan Website kita. Baiklah langsung saja kita masuk ke pokok pembahasanya.

    Pertama buatlah Kode HTML nya seperti di bawah ini :

    Pada tag p  di atas saya berikan class dengan nama tempat-mengetik.

    Lalu kode CSS seperti di bawah ini :

    Di mana pada kode css diatas saya membuat animasi dengan nama ketik dan mengatur animasi nya pada keyframe.

    Selanjutnya tambahkan overflow:hidden sehingga ketika efek animasi mengubah ukuran paragraf ke 0 kita tidak akan dapat melihat teks tersebut. Lalu kita dapat menambahkan animasi ketik dengan fungsi steps() dan mengatur waktunya.

    Animasi mengetik teks akan meningkatkan ukuran/lebar paragraf dari 0 sampai 460px, dalam 50 frame sehingga menciptakan efek teks yang sedang di ketik.

    Untuk melihat hasilnya dan mengcopy kode HTML dan CSS nya silahkan klik link ini http://jsfiddle.net/bG36d/

    Selamat mencoba teman-teman.....






Baca juga

Rukan Artha Gading Niaga Blok i - 23, Jalan Boulevard Artha Gading

Kelapa Gading, Jakarta Utara 14240

(Belakang Mall Artha Gading)

Telp: (021) 4585-0387


Ruko Permata Regensi Blok B - 18, Jalan Haji Kelik

Srengseng, Kebon Jeruk, Jakarta Barat 11630

(Depan Hutan Kota Srengseng)

Telp: (021) 5890-8355


Ruko Jalan Taman Daan Mogot Raya No. 23

Kel. Tanjung Duren Utara Kec. Grogol Petamburan, Jakarta Barat 11470

(Belakang Mall Citraland dan Kampus UNTAR II)

Telp: (021) 2941-1188


Ruko Jalan Kartini Raya No. 53

Pancoran Mas, Depok 16436

(± 5 Menit dari Kantor Walikota Depok)

Telp: (021) 7720-7657


Rukan Crown Palace Blok A no 12, Jl Prof Dr Soepomo no 231 (Samping Universitas Sahid).

Kec. Tebet, Kel. Menteng Dalam.

(± 1 Menit dari Tugu Pancoran)

Jakarta Selatan 12870

Telp: (021) 2298-3886

Buka setiap hari Senin - Minggu jam 09.00 s/d 21.00

SMS: 0851-0055-5666 / 0819-7555-666 / 0812-9933-3913 / 0812-9393-3210 / 0812-1999-9155