Code: Cara Membuat Animasi Auto Typing Dengan Typed JS

Cara membuat animasi auto typing dengan typed JS - 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.

• Referensi
• Demo
• Download