Membuat Teks dan Banner Berjalan (Marquee)

Tips kali ini berawal ketika saya ingin meringkas widget banner exchange dan link exchange. Semakin banyaknya teman yang bertukar link, membuat space widget tersebut jadi sangat panjang dan tidak sedap dipandang mata. Terus ada ide dibikin crawling aja ya? Alias teks atau banner dibikin berjalan, bagaimana caranya?? Inilah caranya:

Untuk membuat teks berjalan caranya sangat mudah, dalam bahasa HTML disebut Marquee. Berikut macam-macam dan contoh dari marquee teks:

Marquee Teks Motion#1
Format yang ini merupakan marquee standar agar teks Anda bisa berjalan secara default (dari kanan ke kiri).



Tag Html:<marquee>TEKS ANDA</marquee>



Contoh:
teks berjalan dari kanan ke kiri

Marquee Teks Motion#2
Format ini kebalikan dari format yang pertama yaitu membuat teks berjalan dimulai dari kiri ke kanan, ini sangat berguna jika anda menulis dalam teks:

Tag Html:<marquee direction="right">TEKS ANDA</marquee>


Contoh:
بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِِ

Marquee Teks Motion#3
Format ini membuat teks berjalan bolak-balik memantul kiri ke kanan dan kanan ke kiri, wah... pusing ya?? he.. he..

Tag Html:<marquee behavior="alternate">TEKS ANDA</marquee>


Contoh:
teks berjalan bolak-balik memantul kiri ke kanan dan kanan ke kiri


Marquee Teks Motion#4
Format ini membuat teks anda berjalan dari bawah ke atas.

Tag Html:<marquee direction="up">TEKS ANDA</marquee>


Contoh:
teks berjalan dari bawah ke atas

Marquee Teks Motion#5
Format ini juga kebalikan dari versi sebelumnya yaitu membuat teks anda berjalan dari atas ke bawah.

Tag Html:<marquee direction="down">TEKS ANDA</marquee>


Contoh:
teks berjalan dari atas ke bawah


Marquee dengan Style Jika mengarahkan Mouse maka Teks Akan Berhenti
Format yang ini adalah pengembangan dari motion diatas keistimewaannya jika Anda arahkan mouse pada teks tersebut maka dia akan istirahat dan berhenti.

Tag Html:<marquee onmouseover="this.stop()" onmouseout="this.start()">TEKS ANDA</marquee>


Contoh:
arahkan mouse disini dan teks akan berhenti

Note:
Anda bisa menerapkan format ini pada ke 4 motion diatas dengan menambahkan kode Html pada tag pembuka:

onmouseover="this.stop()" onmouseout="this.start()"

Contohnya:

Motion#2 dengan style teks berhenti jika mouse diarahkan:
<marquee direction="right" onmouseover="this.stop()" onmouseout="this.start()">TEKS ANDA</marquee>

Motion#3 dengan style teks berhenti jika mouse diarahkan: <marquee behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()">TEKS ANDA</marquee>


Motion#4 dengan style teks berhenti jika mouse diarahkan: <marquee direction="up" onmouseover="this.stop()" onmouseout="this.start()">TEKS ANDA</marquee>


Motion#5 dengan style teks berhenti jika mouse diarahkan: <marquee direction="down" onmouseover="this.stop()" onmouseout="this.start()">TEKS ANDA</marquee>

Mengatur Kecepatan Motion
Untuk mengatur kecepatan motion kita dapat menggunakan perintah berikut:
scrollamount="18"

Kita bisa mengatur kecepatan motion teks kita dengan mengganti angka pada bertanda petik diatas ("18"), semakin kecil nilai yang kamu tulis maka motion akan semakin lambat dan semakin besar nilai yang kamu buat juga semakin cepat motion teks yang akan muncul.

Tag Html:
<marquee scrollamount="2">TEKS ANDA</marquee>

Contohnya:
TEKS ANDA

Ok sampai disini sudah mengerti semua kan?? kamu juga bisa mengatur kecepatan ini pada motion yang lain. Masih bingung?? Tulis di kolom komentar aj yach???

Mengatur Batas Ruang Motion
Untuk mengatur batas ruang motion kita menggunakan perintah:
width="100%" height="100"

Untuk mengatur batas kanan-kiri/lebar motion kita bisa mengaturnya dengan mengganti nilai persentase pada width (untuk motion #1, #2, dan #3) dan untuk mengatur batas atas bawah/ketinggian motion kita bisa mengaturnya dengan mengganti nilai height (untuk motion #4 dan #5, dan yang ini bukan porsentase ya??

Tag Html <marquee direction="up" width="100%" height="20">Teks Anda</marquee>


contoh:
Teks Anda

Ok, kawan selamat mengutak-utik ya??