--> Skip to main content

Tulisan Berjalan atau Marquee HTML

Tutorial HTML kali ini akan membahas tentang tata cara membuat tulisan berjalan atau yang biasa disebut dengan marquee html.

Menurut Wikipedia, tag marquee bukanlah standar elemen HTML, dimana pertama kali tag tersebut diperkenalkan oleh Microsoft Internet Explorer sejak tahun 1995. Walaupun bukan standar elemen HTML yang direkomendasikan oleh W3C, namun tag tersebut dapat berjalan pada hampir semua browser dengan sempurna. 

Taq <marquee> memiliki atribut sebagai berikut:

AttributeValueKeterangan
behaviorscroll
slide
alternate
Mendefinisikan jenis scrolling
directionup
down
left
right
Mendefinisikan arah scrolling
heightpixel atau %Menyatakan tinggi marquee
loopnumberMenyatakan berapa kali loop, nilai defaultnya adalah infinite.
scrolldelaysecondsMenyatakan lamanya delay
scrollamountnumberMenyatakan kecepatan gerakan
widthpixel atau %Menyatakan lebar marquee

Tulisan Bergerak atau Marquee Sederhana

<!DOCTYPE html>
<html>
<head>
	<title>Jenis-jenis Marquee</title>
</head>
<body>
	<marquee><h3>Ini Contoh Marquee Sederhana</h3></marquee>
</body>
</html>
Outputnya :
Ini Contoh Marquee Sederhana


Tulisan Bergerak Kekanan

Kita dapat menggunakan attribute direction dengan diset "right" untuk membuat tulisan bergerak menuju ke kanan. Tinggal dimodifikasi script diatas dengan menambahkan:
<marquee direction="right"><h3>Ini Contoh Marquee Bergerak Menuju Kanan</h3></marquee>
Outpunya :
Ini Contoh Marquee Bergerak Menuju Kekanan


Tulisan Bergerak Kekiri

Tulisan bergerak menuju ke kiri dengan menambah atribute direction yang diset "left". Hasilnya akan sama dengan marquee yang tidak set direction.
<marquee direction="left"><h3>Ini Contoh Marquee Bergerak Menuju Kekiri</h3></marquee>
Outpunya :
Ini Contoh Marquee Bergerak Menuju Kekiri


Tulisan Bergerak Keatas

Untuk membuat tulisan bergerak keatas, kita gunakan atribut direction yang diset "up":
<marquee direction="up"><h3>Ini Contoh Marquee Bergerak Menuju Keatas</h3></marquee>
Outpunya :
Ini Contoh Marquee Bergerak Menuju Keatas


Maquee dengan attribute behaviour slide

Marquee yang diset dengan atributte behavior slide akan bergerak secara sliding. Artinya tulisan secara perlahan menuju kekiri, kemudian akan berhenti.
<marquee behavior="slide"><h3>Ini Contoh Marquee Bergerak Secara Sliding</h3></marquee>
Outpunya :
Ini Contoh Marquee Bergerak Secara Sliding


Maquee dengan attribute behaviour alternate

Marquee yang diset dengan attribute behavior alternate akan bergerak dari kanan kekiri, kemudian akan bergerak balik dari kekiri menuju kekanan, begitu seterusnya.
<marquee behavior="alternate"><h3>Ini Contoh Marquee Bergerak Secara Alternate</h3></marquee>
Outpunya :
Ini Contoh Marquee Bergerak Secara Alternate


Maquee dengan attribute attribute loop

Jika kita ingin memberikan kali looping pada sebuah teks berjalan, maka dapat diset attribute loop, misal kita set loopnya :2, artinya setelah dua kali bergerak maka akan menghilang.
<marquee loop="2"><h3>Ini Contoh Marquee Dengan Attribute loop</h3></marquee>
Outpunya :
Ini Contoh Marquee Dengan Attribute Loop


Maquee dengan attribute scrolldelay

Disini kita akan mengatur pergerakan teks berjalan dengan memberikan delay. Jika ingin menunda selama 1 detik maka ganti dengan angka 1000, jika ingin menunda selama 0.5 detik maka diset 500

<marquee scrolldelay="500"><h3>Ini Contoh Marquee Dengan Attribute Scrolldelay 0,5 detik</h3></marquee>
Outpunya :
Ini Contoh Marquee Dengan Atribute Scrolldelay 0,5 detik


Maquee dengan attribute scrollamount

Untuk membuat tulisan teks bergerak menjadi cepat, maka dapat diset dengan marquee attribute scrollamount. Makin tinggi angkanya, maka cepat pergerakannya. 
<marquee scrollamount="20"><h3>Ini Contoh Marquee Bergerak Secara Scrollamout</h3></marquee>
Outpunya :
Ini Contoh Marquee Bergerak Secara Scrollamount

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar