Cara Membuat Efek Ketikan CSS JavaScript

Halo semuanya pada kesempatan kali ini alafgani.web.id akan memberikan cara bagaimana membuat efek ketikan css? membuat efek ketikan css atau typing text effect yang seperti mesin ketik dengan CSS, Kita tidak perlu membutuhkan plugin atau liblary tertentu. Disini kita akan membuatnya menggunakan CSS dan JavaScript. Langsung aja kita bahas cara membuatnya.

Table of Contents

Apa itu CSS?

CSS adalah Cascading Style Sheets yang terdapat 3 versi yaitu CSS1, CSS2, dan CSS3. CSS3 merupakan versi terbaru saat ini digunakan. Dengan munculnya CSS3 mampu membuat animasi warna sampai animasi 3D.

CSS sangat membantu untuk mempercantik halaman depan website seperti bisa mengubah warna, ukuran, jenis font, tata letak, serta berbagai aspek visual lain dari elemen-elemen HTML.

Apa itu JavaScript?

Sederhananya JavaScript adalah bahasa pemrograman yang digunakan oleh programmer untuk menciptakan halaman web yang interaktif. Sebagai contoh, ketika Kamu menjelajahi internet, di halaman website kamu melihat gambar bergerak, menu dropdown yang dapat diklik untuk tampil, atau elemen yang berubah warnanya secara dinamis di halaman web, itu adalah salah satu fungsi JavaScript, agar website terlihat lebih hidup.

Untuk membuat efek ketikan css ini kita memerlukan JavaScript agar efek ketikan bisa lebih interaktif, sudah tidak sabar bagaimana cara membuatnya? yuk kita ke intinya.

Cara Membuat Efek Ketikan CSS dan JavaScript

Efek pengetikan ini ialah sebuah tulisan/paragraph yang akan muncul secara perlahan di halaman website, efek ketikan tersebut muncul huruf demi huruf memiliki kecepatan sesuai settingan yang dibuat.

Siapkan file index.html atau kunjungi lab virtual dan masukan kode berikut ini.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Effek Mengetik Teks</title>
<style>
#typed-text {
font-size: 24px;
font-family: 'Arial', sans-serif;
border-right: 2px solid #000;
white-space: nowrap;
overflow: hidden;
display: inline-block;
vertical-align: bottom;
animation: blink-caret 0.75s step-end infinite;
}

@keyframes blink-caret {
from, to {
border-color: transparent;
}
50% {
border-color: #000;
}
}
</style>
</head>
<body>
<div id="typed-text"></div>

<script>
const textsToType = [
"Don't Forget to follow!",
"Don't Forget to subscribe!.",
"For more trick, Thank you :)."
];

let textIndex = 0;
let charIndex = 0;
const speed = 100; // Kecepatan mengetik dalam milidetik

function typeText() {
const typedTextElement = document.getElementById('typed-text');

if (charIndex < textsToType[textIndex].length) {
typedTextElement.innerHTML += textsToType[textIndex].charAt(charIndex);
charIndex++;
setTimeout(typeText, speed);
} else {
setTimeout(eraseText, 1500);
}
}

function eraseText() {
const typedTextElement = document.getElementById('typed-text');

if (charIndex > 0) {
typedTextElement.innerHTML = textsToType[textIndex].substring(0, charIndex - 1);
charIndex--;
setTimeout(eraseText, speed);
} else {
textIndex++;
if (textIndex >= textsToType.length) {
textIndex = 0;
}
setTimeout(typeText, 500);
}
}

typeText();
</script>
</body>
</html>

Nanti hasilnya kurang lebih akan seperti dibawah ini.

Lihat Hasilnya

Penutup

Itulah cara membuat efek ketikan dengan css, Jangan lupa di klik tombol sharenya, jika ada kritik, pertanyaan atau saran silakan hubungi kami atau silakan isi di kolom komentar.