Efek Pengetikan Dengan Javascript

Dalam kesempatan kali ini teknologi[dot]visitklaten[dot]com akan berbagi cara membuat efek pengetikan atau typing effect yang seperti mesin ketik dengan Javascript.

Tanpa plugin dengan bermodalkan Javascript yang cukup sederhana dan simple dan tinggal copas saja maka rekan-rekan bisa membuat efek pengetikan seperti mesin ketik di wordpress.

Efek pengetikan ini yakni sebuah tulisan/paragraph akan muncul secara perlahan huruf demi huruf dengan kecepatan sesuai settingan yang dibuat.

JavaScript adalah suatu bahasa pemrograman level tinggi yang pada awalnya didesain untuk membuat efek interaktif pada browser. Dahulu bahasa pemrograman ini sebagian besar hanya digunakan untuk program-program front-end. Akan tetapi sekarang ruang lingkupnya sudah lebih luas dan menjadi favorit Pengembang sepanjang masa.

JavaScript memiliki daftar framework yang tidak ada habisnya. Dilengkapi dengan library, dan juga solusi perangkat lunak seperti Electron, node.js, Angular JS, dan masih banyak lagi lainnya. JavaScript saat ini sudah digunakan untuk membuat program front-end, back-end, dan juga berbagai macam permainan.

Sebelumnya kami ucapkan terima kasih kepada para pengunjung teknologi[dot]visitklaten[dot]com yang telah meluangkan waktunya untuk mengunjungi website kami yang masih banyak kekurangan ini. Kami menerima segala masukkan dan kritikan agar web dan diri kami menjadi lebih baik lagi.

Efek Pengetikan Menggunakan Javascript

Untuk membuat efek pengetikan meskipun menggunakan javascript namun cukup mudah untuk membuatnya. Silakan lihat contoh dibawah ini nanti tinggal diganti tulisannya. yuk cap cuz

<a href="" class="typewrite" data-period="2000" data-type='[ "VisitKlaten[dot]Com", "Peta Pariwisata Klaten", "Media Iklan Di Klaten.", "Klaten Bersinar" ]'>
<span class="wrap"></span>
</a>


<script>
jQuery(document).ready(function($){
var TxtType = function(el, toRotate, period) {
        this.toRotate = toRotate;
        this.el = el;
        this.loopNum = 0;
        this.period = parseInt(period, 10) || 2000;
        this.txt = '';
        this.tick();
        this.isDeleting = false;
    };

    TxtType.prototype.tick = function() {
        var i = this.loopNum % this.toRotate.length;
        var fullTxt = this.toRotate[i];

        if (this.isDeleting) {
        this.txt = fullTxt.substring(0, this.txt.length - 1);
        } else {
        this.txt = fullTxt.substring(0, this.txt.length + 1);
        }

        this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';

        var that = this;
        var delta = 200 - Math.random() * 100;

        if (this.isDeleting) { delta /= 2; }

        if (!this.isDeleting && this.txt === fullTxt) {
        delta = this.period;
        this.isDeleting = true;
        } else if (this.isDeleting && this.txt === '') {
        this.isDeleting = false;
        this.loopNum++;
        delta = 500;
        }

        setTimeout(function() {
        that.tick();
        }, delta);
    };

    window.onload = function() {
        var elements = document.getElementsByClassName('typewrite');
        for (var i=0; i<elements.length; i++) {
            var toRotate = elements[i].getAttribute('data-type');
            var period = elements[i].getAttribute('data-period');
            if (toRotate) {
              new TxtType(elements[i], JSON.parse(toRotate), period);
            }
        }
        // INJECT CSS
        var css = document.createElement("style");
        css.type = "text/css";
        css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";
        document.body.appendChild(css);
    };


});
</script>

Hasilnya kurang lebih akan seperti dibawah ini

Terima kasih telah mengunjungi website kami.

Share jika bermanfaat, jika ada kritik, tambahan, pertanyaan atau saran silakan hubungi kami atau silakan isi di kolom komentar.