klik untuk menyalin
👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Efek Mengetik Sendiri</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #282c34;
color: #61dafb;
}
.typewriter {
font-size: 24px;
width: 80%; /* Batas lebar kontainer */
max-width: 600px; /* Maksimal lebar kontainer */
word-wrap: break-word; /* Memastikan teks turun ke baris baru */
white-space: pre-wrap; /* Untuk menjaga format spasi jika ada */
border-right: 2px solid #61dafb;
overflow: hidden;
}
.blink {
animation: blink 0.7s steps(2, start) infinite;
}
@keyframes blink {
from { border-color: #61dafb; }
to { border-color: transparent; }
}
</style>
</head>
<body>
<div class="typewriter" id="typewriter"></div>
<script>
const text = `Halo, ini adalah efek tulisan yang mengetik sendiri!
Teks ini tidak akan melewati area yang ditentukan.
Ayo buat sesuatu yang keren!`;
const speed = 100; // Kecepatan mengetik dalam milidetik
let i = 0;
function typeEffect() {
if (i < text.length) {
document.getElementById("typewriter").textContent += text.charAt(i);
i++;
setTimeout(typeEffect, speed);
}
}
// Mulai efek mengetik
typeEffect();
</script>
</body>
</html>
Komentar untuk Kode script text mengetik sendiri