Jika Anda membuat suatu website atau halaman HTML pasti Anda menginginkan sesuatu yang menarik agar para pengunjung yang melihatnya tertarik untuk menjelajahi halaman tersebut.
Banyak sekali tag-tag HTML yang bisa Anda gunakan untuk membuat suatu halaman HTML terlihat lebih menarik, salah satunya adalah dengan memberikan Animasi teks bergerak pada halaman HTML tersebut.
Membuat Teks Berjalan Menggunakan Marquee
Jika Anda ingin membuat teks berjalan maka Anda dapat menggunakan tag Marquee. Marquee atau teks berjalan dapat dibuat untuk menggerakan teks dari kiri ke kanan, dari atas ke bawah ataupun sebaliknya, bahkan gabungan variasi dari keduanya.
Contoh Penggunaan Tag Marquee Dari Kanan ke Kiri :
Pertama Anda dapat membuat tag marquee bergerak dari arah kanan ke kiri, silahkan Anda siapkan code editor Anda dan coba source code dibawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Membuat Animasi Teks Bergerak</title>
</head>
<body>
<p>Teks bergerak dari kanan ke kiri</p>
<marquee> Belajar memberikan animasi teks bergerak </marquee>
</body>
</html>
Contoh Penggunaan Tag Marquee Dari Kiri ke Kanan:
Berikut ini adalah cara menggunakan tag marquee untuk memberikan efek teks bergerak dari arah kiri ke kanan.
<!DOCTYPE html>
<html>
<head>
<title>Membuat Animasi Teks Bergerak</title>
</head>
<body>
<p>Teks bergerak dari kiri ke kanan</p>
<marquee direction="right"> Belajar memberikan animasi teks bergerak </marquee>
</body>
</html>
Contoh Penggunaan Tag Marquee Dari Kanan ke Kiri dan Kiri ke Kanan :
Anda juga dapat membuat variasi pergerakan teks seperti pada contoh ini, dimana Anda dapat membuat animasi teks bergerak dari arah kanan ke kiri dan dari kiri ke kanan.
<!DOCTYPE html>
<html>
<head>
<title>Membuat Animasi Teks Bergerak</title>
</head>
<body>
<p>Bergerak dari kanan ke kiri dan dari kiri ke kanan</p>
<marquee behavior="alternate"> Belajar memberikan animasi teks bergerak </marquee>
</body>
</html>
Contoh Penggunaan Tag Marquee Dari Atas ke Bawah :
Berikut ini adalah contoh penggunaan marquee untuk memberikan efek animasi dari atas ke bawah pada teks Anda.
<!DOCTYPE html>
<html>
<head>
<title>Membuat Animasi Teks Bergerak</title>
</head>
<body>
<p>Bergerak dari bawah ke atas</p>
<marquee direction="up"> Belajar memberikan animasi teks bergerak </marquee>
</body>
</html>
Contoh Penggunaan Tag Marquee Dari Bawah ke Atas :
Contoh berikut ini adalah sebaliknya yaitu dari bawah ke atas.
<!DOCTYPE html>
<html>
<head>
<title>Membuat Animasi Teks Bergerak</title>
</head>
<body>
<p>Bergerak dari bawah ke atas</p>
<marquee direction="up"> Belajar memberikan animasi teks bergerak </marquee>
</body>
</html>
Contoh Penggunaan Tag Marquee Dari Atas ke Bawah dan Bawah ke Atas :
Sekarang kita menggunakan tag marquee kombinasi antara 2 contoh sebelumnya.
<!DOCTYPE html>
<html>
<head>
<title>Membuat Animasi Teks Bergerak</title>
</head>
<body>
<p>Bergerak dari bawah ke atas dan dari Atas ke Bawah</p>
<marquee behavior="alternate" direction="up"> Belajar memberikan animasi teks bergerak </marquee>
</body>
</html>
Contoh Penggunaan Tag Marquee Zigzag :
Sekarang kita akan coba untuk membuat efek zigzag menggunakan tag marquee.
<!DOCTYPE html>
<html>
<head>
<title>Membuat Animasi Teks Bergerak</title>
</head>
<body>
<p>Bergerak Zigzag</p>
<marquee behavior="alternate" direction="up" width="50%"><marquee
direction="right"> Belajar memberikan animasi teks bergerak </marquee></marquee>
</body>
</html>
Contoh Penggunaan Tag Marquee yang Lebih Kompleks :
Sekarang kita coba untuk membuat tag marquee dengan struktur yang lebih kompleks dari sebelumnya, silahkan siapkan code editor Anda dan salin source code dibawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Membuat Animasi Teks Bergerak</title>
</head>
<body>
<marquee behavior="alternate" bgcolor="#E08283">ANIMASI
MARQUEE(ALTERNATE)</marquee><br><br>
<marquee behavior="scroll" bgcolor="#BF55EC"
direction="left">ANIMASI MARQUEE(SCROLL)</marquee><br><br>
<marquee behavior="slide" bgcolor="#F7CA18" >ANIMASI
MARQUEE(SLIDE)</marquee><br><br>
</body>
</html>
Itulah contoh-contoh penggunaan tag marquee untuk membuat efek animasi teks bergerak pada halaman HTML Anda, agar lebih paham maka Anda harus banyak berlatih membuat halaman HTML sederhana.
Baca juga :
Cara Menampilkan Gambar Pada Halaman HTML
Cara Mengatur Font, Ukuran dan Perataan Teks HTML
EmoticonEmoticon