Trik Membuat Efek Marquee (Tulisan Bergerak)

Setelah lama tidak posting artikel karena ada pekerjaan offline maka pada hari ini saya ingin berbagi trik untuk membuat tulisan bergerak atau yang lebih populernya disebut efek marquee. Efek marquee banyak diminati para blogger karena juga dapat menambah menarik penampilan blog atau postingan kita.
Pada dasarnya marquee ini dibuat dengan menggunakan tag <marquee>...</marquee>, selain itu ada beberapa atribut/jenis marque yang sering digunakan seperti :

1. BGCOLOR=untuk mengatur background (latar belakang) text
2. DIRECTION=untuk mengatur arah pergerakan text sesuai keinginan kita (left/right/up/down)
3. BEHAVIOR=untuk mengatur jenis/prilaku gerakan (scroll=text berputar, slide=text bergerak sekali terus berhenti, Altenate=text bergerak dari kiri ke kanan dan balik lagi/bolak balik)
4. TITLE=pesan akan muncul jika mouse berada di atas text
5. SCROLLMOUNT=mengatur kecepatan gerakan text, misalnya 10. Semakin besar angkanya maka semakin cepat gerakannya dan begitu juga sebaliknya
6. SCROLLDELAY=untuk mengatur waktu tunda gerakan textnya
7. WIDTH=mengatur lebar blok text
8. Dan lain-lain

Mari kita langsung praktekkan teorinya,

1. Tulisan bergerak dari kanan ke kiri, perintahnya
   

   <marquee>tempat kalimat/text kita di sini</marquee>

   
   atau
   
   

   <marquee direction="left">tempat kalimat/text kita di sini</marquee>

   
   Maka hasilnya :
   tempat kalimat/text kita di sini


2. Tulisan bergerak dari kiri ke kanan, perintahnya :
   
   

   <marquee direction="right">tempat kalimat/text kita di sini</marquee>

   
   Maka hasilnya :
   tempat kalimat/text kita di sini


3. Tulisan bergerak bolak-balik (kiri-kanan), perintahnya :
   
   

   <marquee behavior="alternate">tempat kalimat/text kita di sini</marquee>

   
   Maka hasilnya :
   tempat kalimat/text kita di sini


4. Tulisan bergerak ke atas, perintahnya :
   
   

   <marquee direction="up"> tempat kalimat/text kita di sini1</br> tempat kalimat/text kita di sini2</marquee>

   
   Maka hasilnya :
   
   tempat kalimat/text kita di sini1
   
   
   tempat kalimat/text kita di sini2


5. Tulisan bergerak ke bawah, perintahnya :
   
   

   <marquee direction="down"> tempat kalimat/text kita di sini1</br> tempat kalimat/text kita di sini2</marquee>

   
   Maka hasilnya :
   
   tempat kalimat/text kita di sini1
   
   
   tempat kalimat/text kita di sini2


6. Tulisan bergerak yang jika di short/ketika mouse berada di area marquee text maka tulisannya berhenti dan jika mouse di geser ke tempat lain maka tulisan/textnya bergerak kembali, maka perintahnya :
   
   

   <marquee direction="right" onmouseover="this.stop()" onmouseout="this.start()"> tempat kalimat/text kita di sini</marquee>

   
   Hasilnya :
   tempat kalimat/text kita di sini


7. Tulisan bergerak zig-zag, perintahnya :
   
   

   <marquee behavior="alternate" direction="up" width="80"><marquee direction="right"> <b>TEXT</b></marquee></marquee>

   
   Hasilnya :
   TEXT
   
8. Tulisan bergerak dengan warna background, huruf berwarna dan jika short maka tulisannya berhenti dan bergerak kembali jika mouse kita arahkan ke tempat lain, perintahnya :
   
   

   <marquee behavior="alternate" bgcolor="#FFFF00"  onmouseover="this.stop()" onmouseout="this.start()"> <span style="color:#0000FF"><b>text kita di sini</b></span></marquee>

   
   Hasilnya :
   text kita di sini
   


9. Tulisan bergerak dari kanan, tampilan slide (bergerak sekali dan berhenti), kecepatan (scrollamount) 25 dan berwarna biru, perintahnya :
   
   

   <marquee behavior="slide" direction="right" scrollamount="25"><span style= "color:#0000FF"><b>KALIMAT/TEXT SLIDE KITA</b></span></marquee>

   
   Hasilnya :
   TEMPAT KALIMAT/TEXT SLIDE KITA

Mungkin itu saja contoh-contoh yang bisa saya berikan, untuk mempercantik cara bergeraknya dan jenis lainnya silakan di gonta-ganti/otak-atik kode HTML nya sesuai selera masing-masing. Selamat mencoba trik ini dan semoga bermanfaat.
Terima kasih

by Facebook Comment , Mau ?