Membuat Animasi Auto Typing Dengan Typed Js

Membuat animasi auto typing dengan typed JS - Hello, Selamat pagi :)
Pada pembahasan kali ini aku akan membahas seputar typed JS. Dengan memakai typed JS memungkinkan anda menciptakan sebuah animasi auto typing dengan gampang hanya memakai beberapa baris arahan saja :D (go to official site)

Persiapan
Download terlebih dahulu typed.js disini . Jangan lupa d0wnl0ad 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 menciptakan 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 aku punya beberapa sample demo dan menyiapkan souce code lengkap untuk anda lihat sekaligus mengunduhnya.

Demo

Download

Sumber http://www.kang-cahya.com

Share this post

Berlangganan update artikel terbaru via email: