Membuat Running Text Menggunakan HTML

Pada tutorial kali ini, kita akan membahas mengenai bagaimana membuat running text yang kompatibel dengan semua browser || Zypo-Code

Daftar Isi [😍 Tampilkan 😍]

1. Marquee Dasar

Elemen marquee digunakan untuk membuat teks atau media lain (seperti gambar atau video) bergerak baik secara horizontal maupun vertikal. Saat ini beberapa browser sudah tidak lagi mendukung elemen marquee sehingga elemen ini jarang digunakan.

<!DOCTYPE html>
<html>
  <head>
    <title>Atribut Tag Marquee</title>
  </head>
  <body>
    <marquee>Teks ini berjalan (Default)</marquee>
  </body>
</html>

Teks ini berjalan (Default)

2. Marquee Tag Direction

Atribu Direction digunakan untuk menentukan arah gerak dari konten yang berada di dalam <marquee>. Terdapa 4 nilai dalam atribut ini yaitu Right, Left, Up dan Down

<!DOCTYPE html>
<html>
  <head>
    <title>Atribut Direction di Tag Marquee</title>
  </head>
  <body>
    <marquee direction="right">Teks ini ke Kanan</marquee>
    <marquee direction="left">Teks ini ke Kiri</marquee>
    <marquee direction="up" height="100">Teks ini ke Atas</marquee><!-- Saya Tambah dengan Atribut Height agar Terlihat -->
    <marquee direction="down" height="100">Teks ini ke Bawah</marquee><!-- Saya Tambah dengan Atribut Height agar Terlihat -->
  </body>
</html>

Teks ini ke Kanan Teks ini ke Kiri Teks ini ke Atas Teks ini ke Bawah

3. Marquee Tag Behavior

Atribut behavior digunakan untuk menentukan tipe pergerakan marquee. Nilai yang dapat diisi di atribut behavior yaitu slide, scroll ataupun alternate. Jika Anda tidak membuat atribut behavior di tag <marquee> maka secara default nilainya adalah “scroll”.

<!DOCTYPE html>
<html>
 <head>
  <title>Atribut Behavior di Tag Marquee</title>
 </head>
 <body>
  <marquee behavior="scroll">Welcome</marquee>
  <marquee behavior="slide">Welcome</marquee><!-- Jika Menggunakan Slide Teks Akan Tertinggal -->
  <marquee behavior="alternate">Welcome</marquee>
 </body>
</html>

Welcome Welcome Welcome

4. Marquee Tag Scrolldelay

<!DOCTYPE html>
<html>
 <head>
  <title>Atribut Scrolldelay di Tag Marquee</title>
 </head>
 <body>
  <marquee scrolldelay="100">Teks ini di beri Delay 100</marquee>
  <marquee scrolldelay="400">Teks ini di beri Delay 400</marquee>
 </body>
</html>

Teks ini di beri Delay 100 Teks ini di beri Delay 400

5. Marquee Tag Scrollamount

<!DOCTYPE html>
<html>
 <head>
  <title>Atribut Scrollamount di Tag Marquee</title>
 </head>
 <body>
  <marquee scrollamount="15">Teks ini Menambah Kecepatan 15</marquee>
  <marquee scrollamount="25">Teks ini Menambah Kecepatan 25</marquee>
 </body>
</html>

Teks ini Menambah Kecepatan 15 Teks ini Menambah Kecepatan 25

6. Marquee Tag Loop

<!DOCTYPE html>
<html>
 <head>
  <title>Atribut Loop di Tag Marquee</title>
 </head>
 <body>
  <marquee loop="2">Teks ini diberi LOOP</marquee><br><!-- Setelah Loop 2x Teks Akan Menghilang-->
  <marquee loop="2" behavior="slide">Teks ini diberi LOOP + SLODE</marquee><!-- Jika Menggunakan Slide Teks Akan Tertinggal -->
 </body>
</html>

Welcome
Welcome

7. Gambar di Balut Marquee

<!DOCTYPE html>
<html>
  <head>
    <title>Gambar di Tag Marquee</title>
  </head>
  <body>
    <marquee bgcolor="black" scrollamount="25" direction="right" bgcolor="black">
      <img src="url-gambar-kalian-1.jpg"/>
  </body>
</html>

Zypo Code || Situs Pemrograman Indonesia

Cari blog ini