Cara Membuat Typewriter Menggunakan VueJs

Pada kesempatan ini saya akan membahas dan sama-sama belajar bagaimana membuat Typewriter menggunakan VueJs. Typewriter sendiri seperti kita melakukan pengetikan kata atau kalimat menggunakan keyboard. Nah kalau dalam HTML menggunakan tag <marquee> seperti text yang berjalan.Baiklah langsung saja mari kita mulai membuatnya, yuk simak langkah-langkah berikut:

Sahabat buat file HTML yang berisi seperti dibawah ini:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
    <title>Membuat Typewrite Dengan VueJs</title>
  </head>

code diatas untuk bagian head, selanjutnya bagian isi body

<body>
    <div class="container mt-5 h-20">
      <div class="row">
        <div class="col-md-6 offset-md-3 bg-info p-5">
        <div id="app">
          <div class="text-white font-weight-bold">
            {{isiContent}}
          </div>
        </div>        
        </div>
      </div> 
    </div>

Pada code diatas saya menggunakan struktur Bootstrap supaya terlihat rapih dan mudah menggunakannya. baiklah jangan lupa dalam menambahkan script yang harus sahabat ketikkan dibawah ini:

<script>
      new Vue({
          data(){
            return{
              curWordIndex: 0,
              curTextLen: 1,
              isiContent: "",
              timeToWait: 100,
              words: [
                'Vue js adalah salah satu framework Javascript, Vue Js merupakan framework untuk kebutuhan front end dari sebuah project'
              ]     
            }
          },
          methods: {
            splitText() {
              var _this = this;
              var isi = this.words[this.curWordIndex];
              this.isiContent =
                " " +
                isi.
              split("").
              slice(0, this.curTextLen).
              join("");
              if (this.curTextLen === isi.length) {
                this.curTextLen = 0;
                if (this.curWordIndex === this.words.length - 1) this.curWordIndex = 0;else
                  ++this.curWordIndex;
                this.timeToWait = 500;
              } else {
                ++this.curTextLen;
                this.timeToWait = 50;
              }
              setTimeout(function (_) {return _this.splitText();}, this.timeToWait);
            } 
          },
          
          mounted() {
            var _this2 = this;
            setTimeout(function (_) {return _this2.splitText();}, 200);
          } 
        }).$mount('#app');
    </script>

Dalam code diatas untuk menampilkan data yang nanti akan ditampilkan pada expression {{isiContent}}, lalu mengatur index mulai karakter yang akan tampil.

Selanjutnya simpan yang sudah diketikkan lalu jalankan pada browser masing-masing dan lihat hasilnya.

Saya kira cukup dalam pembahasan artikel kali ini semoga bermanfaat dan sampai jumpa.

terima kasih

Cara Membuat Typewriter Menggunakan VueJs

Kategori