Membuat efek ketikan pada text di Website

Pernah gak sih kalian menemukan website terus ngeliat ada tulisan yang kaya diketik gitu padahal kita gak mencet apa-apa ? Tenang itu bukan hantu kok hehehe, itu adalah sebuah fungsi yang dipakai oleh web developer untuk mempercantik tampilan webnya. Terus gimana buatnya ? Iya nanti mimin kasih tau kok caranya beserta source codenya juga kok hehe.

Jadi kali ini kita akan melanjutkan project website portofolio yang sebelumnya sudah sampai jumbotron, bagi yang belum lihat bisa dibaca dan dipelajari dulu ya …

Membuat jumbotron di Website

Nah setelah itu, mari kita ganti tulisan yg menunjukan “skill” yang kita input memakai efek ketikan gitu. Bukan hanya 1 loh, tapi bisa digunakan untuk beberapa kalimat juga. Pasti keren banget deh apalagi nanti kalo ada HRD melihat halaman website kita hehe.

Eksekusi

• Pertama, kita memakai javascript untuk membuat efek ketikan pada teks tersebut
• Kedua, buka VS Code kalian dan open folder website
• Ketiga, open file html kalian
• Keempat, copy paste kan code dibawah ini kedalam folder html kalian :
  <!– Skill Text Slider –>
          <div class=”skill”>
            <form name=”news”>
            <input name=”news2″ type=”text” wrap=virtual></input>
            </form>
            <script language=JavaScript>
            var newsText = new Array();
            newsText[0] = “Selamat Datang di Websiteku”;
            newsText[1] = “Frontend Web Developer”;
            newsText[2] = “Graphic Designer”;
            newsText[3] = “Video Editor”;
            newsText[4] = “Universitas Pelita Bangsa”;
            var ttloop = 1;    // Repeat forever? (1 = True; 0 = False)
            var tspeed = 50;   // Typing speed in milliseconds (larger number = slower)
            var tdelay = 1000; // Time delay between newsTexts in milliseconds
            // ————- JANGAN DI EDIT DISINI ————- \\
            var dwAText, cnews=0, eline=0, cchar=0, mxText;
            function doNews() {
            mxText = newsText.length – 1;
            dwAText = newsText[cnews];
            setTimeout(“addChar()”,1000)
            }
            function addNews() {
            cnews += 1;
            if (cnews <= mxText) {
            dwAText = newsText[cnews];
            if (dwAText.length != 0) {
            document.news.news2.value = “”;
            eline = 0;
            setTimeout(“addChar()”,tspeed)
            }
            }
            }
            //Biarin aja
            function addChar() {
            if (eline!=1) {
            if (cchar != dwAText.length) {
            nmttxt = “”; for (var k=0; k<=cchar;k++) nmttxt += dwAText.charAt(k);
            document.news.news2.value = nmttxt;
            cchar += 1;
            if (cchar != dwAText.length) document.news.news2.value += “_”;
            } else {
            cchar = 0;
            eline = 1;
            }
            if (mxText==cnews && eline!=0 && ttloop!=0) {
            cnews = 0; setTimeout(“addNews()”,tdelay);
            } else setTimeout(“addChar()”,tspeed);
            } else {
            setTimeout(“addNews()”,tdelay)
            }
            }
            doNews()
            </script>
          </div>

  

• Lalu pada file css kalian copy paste kan code dibawah ini :
  @media (min-width: 992px) {
  .skill input {
      background: none;
      border: none;
      color: white;
      padding: 2px;
      width: 600px;
      justify-content: center;
      font-size: 2rem;
      font-weight: 400;
      font-family: SB Heading,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
      text-align: center;
  } }
  .skill input {
      background: none;
      border: none;
      color: white;
      padding: 2px;
      width: 320px;
      justify-content: center;
      font-size: 1.5rem;
      font-weight: 400;
      font-family: SB Heading,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
      text-align: center;
  }

  

Setelah sukses, lihat hasilnya menggunakan live server atau akses file html kalian melalu web browser yg dimiliki.

Untuk contoh hasil bisa lihat video dibawah ini ya…