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;

}