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:
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:
Attribute | Value | Keterangan |
---|---|---|
behavior | scroll slide alternate | Mendefinisikan jenis scrolling |
direction | up down left right | Mendefinisikan arah scrolling |
height | pixel atau % | Menyatakan tinggi marquee |
loop | number | Menyatakan berapa kali loop, nilai defaultnya adalah infinite. |
scrolldelay | seconds | Menyatakan lamanya delay |
scrollamount | number | Menyatakan kecepatan gerakan |
width | pixel 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 :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 :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 :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 :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 :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 :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 :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 :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 :