Info Tentang Trik Membuat Teks Efek Diketik Dengan CSS Update Terbaru 2017 Gratis

Sedikit Info Seputar Trik Membuat Teks Efek Diketik Dengan CSS Terbaru 2017 - Hay gaes kali ini team Apps Android Games, kali ini akan membahas artikel dengan judul Trik Membuat Teks Efek Diketik Dengan CSS, kami selaku Team Apps Android Games telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Apps Android Games. semoga isi postingan tentang Artikel Tips And Trick Blogger, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Trik Membuat Teks Efek Diketik Dengan CSS Full Update Terbaru
link: Trik Membuat Teks Efek Diketik Dengan CSS

Artikel Terbaru Trik Membuat Teks Efek Diketik Dengan CSS Update Terlengkap 2017

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

sebelumnya saya share tentang cara membuat efek diketik dengan javascript

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 MuizCyan-XP Blog Dari Sindangherang | <a href="http://www.muizcyan.co.vu/">http://www.muizcyan.co.vu/</a></p>

ganti kode warna merah dengan teks sobat inginkan

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 padakeyframe.

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 sampai740px, 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.

sumber Web Design Indonesia.

Welcome to MuizCyan-XP | http://www.muizcyan.co.vu/

Itulah sedikit Artikel Trik Membuat Teks Efek Diketik Dengan CSS terbaru dari kami

Semoga artikel Trik Membuat Teks Efek Diketik Dengan CSS yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Apps Android Games. jangan lupa baca juga artikel-artikel lain dari kami.

Terima kasih Anda baru saja membaca Artikel Tentang Trik Membuat Teks Efek Diketik Dengan CSS