Cara Membuat Efek Mengetik di HTML

By Posted on

Cara Membuat Efek Mengetik di HTML – Ingin menghidupkan situs web Anda dengan sentuhan kreatif? Tidak perlu menjadi seorang ahli dalam pemrograman untuk menambahkan efek mengetik yang memikat. Dalam panduan ini, kelashtml akan memandu Anda melalui langkah-langkah sederhana untuk membuat efek mengetik menggunakan HTML dan CSS. Dengan mempelajari cara ini, Anda dapat memberikan kesan yang lebih dinamis dan interaktif pada pengunjung situs Anda.

Alat yang Harus Anda Siapkan

Berikut ini beberapa alat yang harus Anda siapkan untuk membuat efek mengetik di html:

  • Perangkat laptop,
  • Notepad++ (Text editor code),
  • Google chrome (Web browser),
  • Niat yang kuat.

Cara Membuat Efek Mengetik di HTML

1. Buat Folder Proyek “Efek Mengetik”

Sebelum memulai, pastikan Anda memiliki area kerja yang terorganisir dengan baik. Mulailah dengan membuat folder proyek khusus untuk efek mengetik di komputer Anda. Dengan cara ini, Anda dapat dengan mudah mengakses semua file yang terkait dengan proyek ini.

2. Buat File “efek_mengetik.html”

Langkah berikutnya adalah membuat file HTML utama untuk proyek Anda. Dalam file ini, Anda akan menulis struktur dasar HTML yang akan menampung efek mengetik yang akan kita buat.

Baca Juga:  Cara Membuat Button Gambar dengan HTML dan CSS

Berikut ini file html yang harus Anda tambahkan untuk membuat efek mengetik di html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typing Effect</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1 class="typing-text">Tulisan yang akan muncul dengan efek mengetik...</h1>
</div>
</body>
</html>

3. Buat File “style.css”

Setelah membuat file HTML, langkah selanjutnya adalah membuat file CSS terpisah untuk mengatur gaya tampilan dari efek mengetik tersebut. Dengan memisahkan struktur HTML dan gaya CSS, Anda dapat dengan mudah mengelola dan memperbarui tampilan situs Anda tanpa kebingungan.

Berikut ini file css yang harus Anda tambahkan untuk membuat efek mengetik di html:

body, html {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}

.container {
text-align: center;
}

.typing-text {
overflow: hidden; /* Menghilangkan text yang melebihi box */
border-right: .15em solid orange; /* Membuat efek cursor */
white-space: nowrap; /* Mencegah text wrap */
margin: 0 auto; /* Memposisikan text ke tengah */
letter-spacing: .15em; /* Spasi antar karakter */
animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; /* Animasi mengetik dan cursor */
}

@keyframes typing {
from { width: 0 }
to { width: 100% }
}

@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: orange }
}

4. Mengubah Tampilan Efek Mengetik

Sekarang saatnya untuk mulai menghasilkan kode! Di dalam file “efek_mengetik.html“, kita akan menambahkan struktur dasar HTML yang diperlukan untuk efek mengetik. Kemudian, di dalam file “style.css“, kita akan menambahkan gaya yang diperlukan untuk membuat efek mengetik terlihat menarik dan profesional.

Baca Juga:  Cara Membuat Search Engine di HTML

5. Simpan & Lihat Tampilan

Setelah menambahkan semua kode yang diperlukan, langkah terakhir adalah menyimpan file Anda dan melihat hasilnya! Buka file “efek_mengetik.html” di browser web Anda untuk melihat efek mengetik yang baru saja Anda buat. Dengan mengikuti langkah-langkah ini, Anda akan menjadi mahir dalam menambahkan efek mengetik yang memukau pada situs web Anda dalam waktu singkat!

Preview hasil

Berikut ini preview hasil efek mengetik di html:

Penutup

Dengan mengikuti panduan ini, Anda akan dapat menghadirkan pengalaman yang lebih menarik dan interaktif bagi pengunjung situs Anda. Jadi, mari mulai dan buat situs web Anda bersinar dengan efek mengetik yang keren!

Related posts: