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.


1/Post a Comment/Comments

Post a Comment

Previous Post Next Post