Cara Membuat Text Berjalan (marque text)

Baca Juga

Tutorial text berjalan

Bismillah.. pada  tutorial blog kali ini saya akan sedikit berbagi cara membuat text bejalan atau istilahnya sering di sebut marquee text, ini merupakan bagian dari kode kode HTML yang banyak, sudah berapa banyak kode HTML yang sobat pelajari dan di hapal? jika belum mulailah dari kode ini..

Untuk membuat text berjalan sangat lah mudah pertama sobat harus mengingat dan hapal kode ini (<marquee> dan </marquee>), mudahkan? dan mudah di hapal, secara default text berjalan dimulai dari sebelah kanan,

KodeStandar Marquee
<marquee>teks Area</marquee>

• <marquee> :  Tag Pembuka untuk text berjalan
• </marquee> : Adalah tag penutup

Contoh marquee Standar

Contoh teks berjalan

Selain itu sobat juga bisa bisa merubah arah gerakan text tersebut sesuai dengan kemauan sobat,

Contoh text berjalan dari atas ke bawah

Kodennya seperti di di bawah

<marquee direction="down">Teks berjalan dari posisi atas </marque> 

Contoh Teks Berjalan dari Atas

Teks berjalan dari posisi atas

Untuk dari bawah ke atas sobat tinggal ganti direction="down" menjadi direction="up" kode dari bawah ke atas

<marquee direction="up">Teks berjalan dari posisi atas </marque> 

Contoh Gerak daru posisi bawah ke atas,  

Teks berjalan dari posisi bawah ke atas

Selain dari posisi itu sobat juga bisa rubah yang tadinya posisi dari sebelah kanan sekarang bagaimana ingin dari sebelah kiri dulu oke ini conto script dan contoh hasilnya

Posisi dari Kiri Ke kanan

<marquee direction="right">Teks berjalan dari posisi kiri ke kanan </marque>  

Contoh Posisi text marquee Dari kiri ke kanan

Teks berjalan dari posisi kiri menuju kanan

Untuk arah sebaliknya gunakan saja yang standar atau ganti  direction="right"  menjadi direction="left" terus ada lagi sobat sekarang yang bolak balik

Marquee text bolak balik

<marquee direction="right" behavior="alternate">Text Marquee bolak balik</marquee>

Contoh hasil

Text Marquee bolak balik

Selanjutnya sobat juga bisa menambahkan kode onmouseover="this.stop()" onmouseout="this.start()" fungsinya untuk apa yah?? fungsinya jika mouse di dekatkan ke teks maka teks akan berhenti.

Contoh memakai tambahan kode JavaScript

<marquee behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()" >Text Marque </marquee>

Contoh hasilnya

Dekatkan Mouse Ke Text

Selain itu juga, sobat bisa memakai gambar untuk animasinya
Contoh Menggunakan gambar

<marquee ><img src="alamat gambar"/></marquee>

Contoh Memakai gambar

Oke sobat mungkin itu sedikit tentang tutorial cara membuat text berjalan silahkan sobat coba semoga berhasil, jika sobat mau buat secara online dan mungkin ini menarik buat sobat, silahkan sobat cari di google tentang marque generator, atau sobat langsung tuju ke alamat ini http://www.textspace.net/ atau disni http://www.marqueetextlive.com/ disana banyak sekali style nya, akhir kata...Good Luck, Happy blogging