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
Tambahkan ini untuk membuat animasi blink pada kursor
Pada pembasahasan typed JS ini saya punya beberapa sample demo dan menyiapkan souce code lengkap untuk anda lihat sekaligus mengunduhnya.
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.