Berikut adalah panduan singkat tentang cara membuat tulisan bergerak di HTML. Tulisan bergerak sering digunakan untuk menambahkan efek dinamis dan menarik perhatian pengunjung situs.
Efek ini bisa dibuat dengan beberapa cara, salah satunya dengan menggunakan tag <marquee> dan animasi CSS.
Cara Membuat Tulisan Bergerak dengan <marquee>
Tag <marquee> adalah cara paling sederhana untuk membuat tulisan bergerak di HTML. Namun, perlu diperhatikan bahwa tag ini sudah dianggap usang dan tidak dianjurkan untuk digunakan dalam proyek modern karena kurang mendukung di beberapa browser.
Contoh:
<marquee>Ini adalah tulisan bergerak!</marquee>Penjelasan Atribut <marquee>
direction: Mengatur arah gerakan tulisan. Contoh:left,right,up, ataudown.behavior: Mengatur pola gerakan. Contoh:scroll,slide, ataualternate.scrollamount: Mengatur kecepatan gerakan (angka lebih tinggi berarti lebih cepat).loop: Mengatur berapa kali tulisan bergerak (angka atauinfiniteuntuk terus menerus).
Contoh Kustomisasi:
<marquee direction="right" behavior="alternate" scrollamount="5" loop="3">
Tulisan bergerak dari kanan ke kiri dan bolak-balik
</marquee>Cara Membuat Tulisan Bergerak dengan CSS (Disarankan)
Jika kalian ingin membuat tulisan bergerak yang lebih fleksibel dan modern, gunakan CSS untuk membuat animasi. CSS memberikan kendali lebih besar, lebih fleksibel, dan kompatibel di lebih banyak browser.
Contoh Animasi Tulisan Bergerak ke Kiri
- Buat elemen HTML untuk teks yang ingin kalian animasikan.
- Tambahkan kode CSS untuk mengatur animasi.
HTML:
<div class="text-bergerak">Ini adalah tulisan bergerak menggunakan CSS!</div>CSS:
.text-bergerak {
width: 100%;
white-space: nowrap;
overflow: hidden;
display: inline-block;
}
.text-bergerak {
animation: bergerakKiri 10s linear infinite;
}
@keyframes bergerakKiri {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}Penjelasan Kode:
@keyframes: Mendefinisikan animasi dari titik awal (0%) hingga titik akhir (100%) dengan menggunakan propertitransform.translateX(100%)dantranslateX(-100%): Mengatur posisi awal dan akhir teks agar bergerak dari kanan ke kiri.animation: Menjalankan animasi dengan durasi 10 detik secara berulang tanpa henti (infinite).
Contoh Animasi dengan Arah Vertikal
Jika kalian ingin membuat tulisan bergerak secara vertikal (misalnya dari bawah ke atas), cukup sesuaikan translateY dalam @keyframes:
@keyframes bergerakAtas {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(-100%);
}
}Kemudian, tambahkan animasi ini pada elemen teks:
.text-bergerak-vertikal {
animation: bergerakAtas 5s linear infinite;
}Berikut ini adalah contoh kode HTML lengkap yang menunjukkan cara membuat tulisan bergerak menggunakan tag <marquee> dan CSS. Kalian bisa menyalin dan menempelkannya langsung ke dalam file HTML kalian:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Postingan: Cara Membuat Tulisan Bergerak</title>
<style>
/* Gaya untuk postingan full-width */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
background-color: #f4f4f4;
}
.container {
max-width: 800px;
width: 100%;
background: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin: 20px;
overflow: hidden; /* Membatasi konten agar tidak melebihi container */
}
h1, h2 {
color: #333;
}
/* CSS untuk tulisan bergerak horizontal */
.text-bergerak-horizontal-container {
width: 100%;
overflow: hidden; /* Membatasi konten bergerak */
padding: 10px 0;
}
.text-bergerak-horizontal {
display: inline-block;
font-weight: bold;
color: #ff6347;
animation: bergerakKiri 10s linear infinite;
}
@keyframes bergerakKiri {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
/* CSS untuk tulisan bergerak vertikal */
.text-bergerak-vertikal-container {
width: 100%;
height: 30px;
overflow: hidden;
padding: 10px 0;
}
.text-bergerak-vertikal {
display: inline-block;
font-weight: bold;
color: #00796b;
animation: bergerakAtas 5s linear infinite;
}
@keyframes bergerakAtas {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(-100%);
}
}
</style>
</head>
<body>
<div class="container">
<h1>Cara Membuat Tulisan Bergerak di HTML</h1>
<p>Efek tulisan bergerak bisa membuat tampilan website lebih dinamis dan menarik perhatian pengunjung. Berikut adalah beberapa cara untuk membuat tulisan bergerak di HTML, baik dengan tag <code><marquee></code> maupun dengan CSS animasi.</p>
<h2>1. Menggunakan Tag <marquee></h2>
<p>Tag <code><marquee></code> adalah cara paling sederhana untuk membuat teks bergerak, meskipun sudah tidak direkomendasikan dalam proyek modern. Berikut contohnya:</p>
<marquee direction="right" behavior="alternate" scrollamount="5" loop="3">
Tulisan bergerak dari kanan ke kiri dan bolak-balik
</marquee>
<h2>2. Tulisan Bergerak Horizontal dengan CSS</h2>
<p>Contoh ini menggunakan CSS animasi untuk membuat teks bergerak dari kanan ke kiri. Lebih fleksibel dan kompatibel dengan berbagai browser:</p>
<div class="text-bergerak-horizontal-container">
<div class="text-bergerak-horizontal">Ini adalah tulisan bergerak menggunakan CSS!</div>
</div>
<h2>3. Tulisan Bergerak Vertikal dengan CSS</h2>
<p>Dengan CSS, kita juga dapat membuat teks bergerak secara vertikal, misalnya dari bawah ke atas:</p>
<div class="text-bergerak-vertikal-container">
<div class="text-bergerak-vertikal">Tulisan bergerak dari bawah ke atas!</div>
</div>
<p>Dengan menggunakan CSS, kalian dapat mengatur kecepatan, arah, dan jenis animasi sesuai kebutuhan. Ini adalah pilihan yang lebih direkomendasikan untuk proyek modern karena dukungannya yang lebih luas.</p>
</div>
</body>
</html>Kesimpulan
Menggunakan CSS untuk membuat tulisan bergerak jauh lebih disarankan daripada menggunakan <marquee> karena lebih fleksibel dan mendukung kontrol penuh atas animasi. Coba sesuaikan durasi, arah, dan jenis animasi untuk mendapatkan efek yang sesuai dengan gaya desain kalian.