Cara Membuat Animasi Typewriter Menggunakan HTML dan CSS

Salam hangat teman-teman, semoga teman-teman sehat selalu ya, Kali ini saya akan mencoba membagi Cara Membuat Animasi Typewriter Menggunakan HTML dan CSS.

Pasti teman-teman ingin tampilan web teman-teman lebih menarik dengan menyisipkan animasi-animasi pada web.

Nah supaya web teman-teman lebih menarik saya akan memberikan contoh Cara Membuat Animasi Typewriter Menggunakan HTML dan CSS. berikut langkah-langkahnya:

– Pertama teman-teman ketikan dulu tag HTML berikut pada text editor teman-teman. Dan beri class seperti gambar di bawah ini:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

	<div class="typewriter">
	  <h1>Dumetschool</h1>
	</div>

</body>
</html>

– Kedua teman-teman keyikan css di bawah ini dan save dengan nama style.css.

body {
  background: #333;
  color: #fff;
  font-family: monospace;
  padding-top: 5em;
  display: flex;
  justify-content: center;
}

/* demo */
.typewriter h1 {
  overflow: hidden; /* memastikan konten tidak tampil sebelum animasi dimulai */
  border-right: .15em solid orange; /* cursor pada typewriter */
  white-space: nowrap; /* tetap menjaga konten berada pada satu garis */
  margin: 0 auto; /* membuat efek scrolling pada saat animasi berjalan */
  letter-spacing: .15em; /* tambhakan bila di perlukan */
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

/* efek pengetikan */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* efek pada cursor */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}

Untuk penjalasan fungsi dari cssnya saya sudah beri commenting pada file css di atas

– Hasilnya akan menjadi seperti ini.

Kalau di jalankan di browser dia akan mengetikan text yang ada pada tag <h1> secara otomatis.

Bagaimana teman-teman mudahkan Cara Membuat Animasi Typewriter Menggunakan HTML dan CSS. Sekian artikel saya hari ini. Sehat selalu ya teman-teman, selamat mencoba.

Cara Membuat Animasi Typewriter Menggunakan HTML dan CSS

Kategori