Membuat Typwriter Animation Dengan Javascript

Baik pada kesempatan ini zlearn.id akan berbagi tutorial mengenai web desain dan javascript yaitu tentang Membuat Typwriter Animation Dengan Javascript. Nah sebelum masuk topik pembahasan mengani Membuat Typwriter ANimation Dengan Javascript apa sii itu javascript: JavaScript (/ˈdʒɑːvəˌskrɪpt) adalah bahasa pemrograman tingkat tinggi dan dinamis. JavaScript populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Internet Explorer (IE), Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT..

nah langsung ke tutorial ya simak tutorial dengan seksama ya.

Pertama buka text editor anda dan buat sebuah file dengan nama index.html
kemudian  tuliskan script berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
    <title>Animasi JavaSCript</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        body {
  background-color:#1f7be3;;
  text-align: center;
  color:#fff;
  padding-top:10em;
}

* { color:#fff; text-decoration: none;}
    </style>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<h1>
  <a href="" class="typewrite" data-period="2000" data-type='[ "Hello World Zlearn.id", "Apa Kabar.", "Saya Suka Nulis.", "Suka Coding." ]'>
    <span class="wrap"></span>
  </a>
</h1>

<script type="text/javascript">
//made by vipul mirajkar thevipulm.appspot.com
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>
</body>
</html>

setelah itu simpan dan buka di browsur anda oh ya samapi lupa saya menggunakan Bootsrap sebagai deainnya dan script diatas menggunkan bootsrap online. anda bisa mendowload framework bootsrap di situs resminya isa searc di google ukurannya cuman sekitar 500 kban.

setalah di buka dibrowsur maka tampilannya akan seperti gambar di bawah ini:
http://www.zlearn.id/2017/08/membuat-typwriter-animation-dengan-javascript.html


Selamat anda sudah telah mebuat animasi bergerak menggunakan Javascript Html 5 dan Bootraps
Kunjungi Terus Zlearn untuk informasi menarik lainnya. silahkan berkomentar dan share artikel atau postingan ini.
Dan Bila yang mau mendownlaod source kodenya dapat mendownlaod di link di bawah ini:
#NB Password ZIP : zlaeran.id

Share this

Related Posts

Previous
Next Post »

Berita Unik

loading...