Monday, September 7, 2015

Membuat animasi auto typing dengan typed JS

Membuat animasi auto typing dengan typed JS
Membuat animasi auto typing dengan typed JS - Hello, Selamat pagi :)
Pada pembahasan kali ini saya akan membahas seputar typed JS. Dengan menggunakan typed JS memungkinkan anda membuat sebuah animasi auto typing dengan mudah hanya menggunakan beberapa baris kode saja :D (go to official site)

Persiapan
Download terlebih dahulu typed.js disini . Jangan lupa download juga jqurey-nya disini .

Sample Code

<script src="jquery.min.js"></script>
<script src="typed.js"></script>
<script>
$(function(){
$(".text").typed({
strings: ["Hello.", "I'M Cahya."],
typeSpeed: 100
});
});
</script>

<div class="text"></div>

Tambahkan ini untuk membuat animasi blink pada kursor

.typed-cursor{
opacity: 1;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}
@keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}

Pada pembasahasan typed JS ini saya punya beberapa sample demo dan menyiapkan souce code lengkap untuk anda lihat sekaligus mengunduhnya.


Saya hanya seorang "newbie" yang baru bisa ngoding lohor kemarin.

1 komentar so far

nah ini yang ane cari cuman gak tahu keywordnya apaan.. :D


EmoticonEmoticon