Cara Membuat animasi Teks Ngetik

Membuat efek blink pada sebuah teks dengan menggunakan css sebenarnya sangat mudah, kita hanya memanfaatkan kode @keyframe saja. Trik ini juga yang dipakai pada blog PenaPediaku.blogspot.com. Kalau kita perhatikan, pada headernya tepatnya sebelah judul blognya ada sebuah animasi seperti sedang mengetik. Namun efek tersebut dikombinasikan dengan sebuah script sehingga terlihat jadi lebih menarik.

Cara Membuat Efek Blink

Sebagai contoh, perhatikan Kalimat dengan efek blink di bawah ini.

Apakah Teks ini Blink-blink?

untuk membuatnya kita siapkan dulu kode htmlnya kira-kira seperti ini.

<div class='blink'>Apakah Teks ini Blink-blink?</div>

Kemudian kita berikan CSS nya seperti dibawah ini.

<style>
.blink{
    animation:blink 1.2s infinite;
}
@keyframes blink{
    0%{     color: #000;    }
    49%{    color: #000; }
    60%{    color: transparent; }
    99%{    color:transparent;  }
    100%{   color: #000;    }
}
</style>

Kombinasi Efek Blink agar seperti sedang ngetik seperti pada https://bloggerdzn.blogspot.com/

Untuk live demonya silahkan kunjungi saja https://bloggerdzn.blogspot.com/ kalau sudah lihat demonya dan apabila anda tertarik untuk membuatnya, maka lanjutkan membacanya.

Untuk membuat animasi seperti itu, kita membutuhkan sebuah javascript yang kita kombinasikan dengan css blink tadi.

Pertama, buat kode cssnya seperti dibawah ini. Simpan saja sebelum kode ]]></b:skin> pada template anda.

<style>
.blink{
    animation:blink 1.2s infinite;
}
@keyframes blink{
    0%{     color: #000;    }
    49%{    color: #000; }
    60%{    color: transparent; }
    99%{    color:transparent;  }
    100%{   color: #000;    }
}
#judul::after {
    animation: blink 1.2s ease-in-out infinite;
    content: "|";
    font-weight: 100;
}
</style>

Kemudian, siapkan kode html untuk memanggil teks/tulisan yang seperti ngetiknya.

<span id="judul"></span>

Sekarang kita siapkan juga javascriptnya:

<script>//<![CDATA[
const words=["Buat Konten Menarik. ","Happy Blogging.","Think Positive. ","Be Creative. ","Happiness In YourHand."];let i=0;let timer;function typingEffect(){let word=words[i].split("");var loopTyping=function(){if(word.length>0){document.getElementById('judul').innerHTML+=word.shift()}else{setTimeout(deletingEffect,1000);return!1};timer=setTimeout(loopTyping,400)};setTimeout(loopTyping,1000)};function deletingEffect(){let word=words[i].split("");var loopDeleting=function(){if(word.length>0){word.pop();document.getElementById('judul').innerHTML=word.join("")}else{if(words.length>(i+1)){i++}else{i=0};typingEffect();return!1};timer=setTimeout(loopDeleting,50)};loopDeleting()};typingEffect();
//]]>
</script>

Ganti kata-kata yang saya beri tanda kuning tersebut dengan kata-kata mu sendiri. Silahkan dieksplor sendiri tentang penempatan dan kegunaan animasi teks ngetik ini sesuka anda.