Cara membuat animasi Text mengetik menggunakan HTML + CSS

Cara membuat animasi mengetik menggunakan HTML + CSS
muzadidil


Petunjuk Pengguna Windows

  • Buat Folder Baru
  • Buka aplikasi NOTEPAD ++
  • Copy Paste File HTML dan dimpan menggunakan format HTML
  • Copy Paste File CSS dan simpan dengan nama style.css
  • Cek kembali kode yang kalian simpan pastikan sudah benar
  • Buka Folder tempat kalian menyimpan file sebelumnya
  • klik 2x pada file HTML-nya
  • Preview akan di tampilkan, Jika terdapat yang tidak sesuai cek ulang kembali di File HTML atau CSS-nya

Petunjuk Pengguna ANDROID

  • Buat Folder Baru
  • Buka aplikasi anWriter
  • Copy Paste File HTML dan dimpan menggunakan format HTML
  • Copy Paste File CSS dan simpan dengan nama style.css
  • Buka aplikasi anWriternya
  • Buka file htmlnya di menu pojok kiri (burger button)
  • kemdian tekan preview
  • Preview akan di tampilkan, Jika terdapat yang tidak sesuai cek ulang kembali di File HTML atau CSS-nya

HTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>SELAMAT DATANG DI MUZADIDIL.MY.ID</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="text"> </div> <script type="text/javascript"> var i=0,text; text = "SELAMAT DATANG DI MUZADIDIL.MY.ID" function typing() { if(i<text.length){ document.getElementById("text").innerHTML += text.charAt(i); i++; setTimeout(typing,80); } } typing(); </script> </body> </html>

CSS

body{ margin: 0; padding: 0; background: black; } #text{ color: white; font-size: 40px; text-align: center; margin-top: 300px; text-transform: uppercase; font-family: "Montserrat"; font-weight: 700; }


Tags
muzadidil
Intovert, Cepat beradaptasi, simple, Fokus, Cenderung Lebih suka makan daripada Minum.
Komentar