-->

Ad Unit (Iklan) BIG

Loading...
Home  ›  css  ›  html  ›  Javascript

Cara membuat Efek Mengetik Text Menggunakan HTML, Css dan Javascript

di 1 comment

Assalamualaikum warahmatullahi wabarakatuh

Pada kali ini saya akan tutorial bagaimana cara membuat Efek Mengetik Text Menggunakan HTML, Css dan Javascript. Efek ini tentunya bisa digunakan untuk sekedar mempercantik halaman sebuah web. Efek ini ini juga bisanya sering kalian lihat di web yang diretas, biasanya siperetas meninggalkan jejak dengan pesan dengan menggunakan efek mengetik teks ini. 

Lalu Bagaimana Cara Membuatnya?
Untuk membuatnya tidak terlalu sulit, cukup beberapa baris kode Javascript maka kita bisa mendapatkan efek ketikan teks tersebut pada web
  • Buka Code editor kalian. Disini saya pakai sublime text. Oke kalau sudah copy script di bawah ini dan paste di code editor kalian

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Efek Mengetik Text | HTML, CSS, JAVASCRIPT</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

    <div id="text">

    </div>

<script>
  var i=0,text;
  text = "Selamat Datang di MuhdannyBlog!! Enjoy......"

  function ketik() {
    if(i<text.length){
      document.getElementById("text").innerHTML += text.charAt(i);
      i++;
      setTimeout(ketik,80);
    }
  }
  ketik();
</script>


  </body>
</html>
Keterangan:
  • variable text = "Selamat Datang di MuhdannyBlog!! Enjoy......" ganti dengan text yang kalian inginkan
  • setTimeout(ketik,80); angka 80 adalah hitungan detik dan bisa kalian ganti
oke kalau sudah simpan filenya dengan nama index.html

  • Untuk selanjutnya kita tambahkan css biar tampilannya lebih bagus.  Copy script di bawah ini pastekan di code editor kalian

body{
  margin: 0;
  padding: 0;
  background: black;
}

#text{
  color: red;
  font-size: 40px;
  text-align: center;
  margin-top: 300px;
  text-transform: uppercase;
  font-family: "Arial Black";
  font-weight: 700;
}

Kalau sudah simpan filenya dengan nama style.css

Jika Semuanya sudah selesai coba jalankan file HTML tersebut dan inilah hasilnya


Jika kalian ingin source codenya bisa download disini  atau disini
Password: muhdannyblog

Mungkin Cukup Sekian Artikel Cara membuat Efek Mengetik Text Menggunakan HTML, Css dan Javascript, kurang lebihnya mohon maaf. 
Jika ada yang ingin di tanyakan silahkan komentar dibawah

Wassalamualaikum warahmatullahi wabarakatuh
css html Javascript
Muhammad Danny Waskito
Freelancer | Blogger | Gamers amateur | Newbie Designer |

Related Posts

Comments

Post a Comment

Subscribe Our Newsletter