Minggu, 27 Maret 2011 Marquee

Marquee adalah bahasa HTML untuk memberikan efek sebuah kata atau kalimat menjadi berjalan atau bergerak. Marquee ini mempunyai daya tarik tersendiri karena animasi berjalan/bergeraknya tersebut, selain itu penggunaan marquee ini bisa menghemat tempat pada blog anda.

Misalkan anda mempunyai sebuah widget khusus pertukaran link yang di pasang di sidebar, bila pertukaran link anda sudah mencapai puluhan atau ratusan tentu saja akan membuat sidebar anda menjadi sangat panjang dan yang pasti akan terlihat sangat jelek. Saya sendiri mencoba menggunakan marquee ini pada widget random post agar terlihat lebih unik ( mungkin icon mrgreen Belajar Membuat Text Berjalan (marquee) ), tapi itu hanya percobaan saja.

Kekurangan marquee yang baru saya temukan adalah ketika konten atau isi dari marquee melebihi kapasitas (height atau width), sewaktu loading blog belum selesai seluruh isi marquee akan terlihat, dan itu memang cukup mengganggu juga. Berikut beberapa atribut yang bisa digunakan untuk marquee agar terlihat lebih bagus dan cantik icon biggrin Belajar Membuat Text Berjalan (marquee)

* bgcolor : Atribut ini digunakan untuk mengatur background dari text yang akan diberi efek marquee.
* direction : Digunakan untuk mengatur gerakan dari text tersebut (up, down, left right).
* scrollamount : Untuk mengatur kecepatan dari gerakan text (angka dalam px), semakin tinggi angka yang digunakan, maka akan semakin cepat gerakan dari textnya.
* behaviour : Untuk mengatur efek dari gerakannya (slide, scroll, alternate).
* width : Untuk mengatur lebar dari area text nya (dinyatakan dalam px atau %).
* height : Untuk mengatur tinggi dari area text nya (dinyatakan dalam px atau %).
* align : Untuk mengatur posisi (center, left, right).
* onmouseover : Untuk memberhentikan efek ketia disorot(hover) mouse.
* onmouseout : Untuk melanjutkan efek bila mouse sudah tidak menyorot(hover) text.

Sebenarnya masih banyak atribut-atribut lain yang bisa anda gunakan, atribut diatas hanyalah atribut yang sering digunakan. Sekarang kita lihat contoh dari efek-efek marquee ini.
Contoh marquee dari kiri ke kanan

Contoh Marquee dari kiri ke kanan

Contoh Marquee dari kiri ke kanan
Contoh marquee dari kanan ke kiri

Contoh Marquee dari kanan ke kiri

Contoh Marquee dari kiri ke kanan
Contoh marquee dari atas ke bawah

Contoh Marquee dari atas ke bawah


Contoh Marquee dari atas ke bawah
Contoh marquee dari bawah ke atas

Contoh Marquee dari bawah ke atas

Contoh Marquee dari bawah ke atas
Contoh marquee dengan menggunakan background biru dan warna font putih

Contoh Marquee dengan menggunakan background biru dan warna font putih

Contoh Marquee dengan menggunakan background biru dan warna font putih

Contoh marquee berhenti bergerak ketika di sorot mouse dan bergerak kembali ketika sudah tidak di sorot

Contoh marquee berhenti bergerak ketika di sorot mouse dan bergerak kembali ketika sudah tidak di sorot

Contoh marquee berhenti bergerak ketika di sorot mouse dan bergerak kembali ketika sudah tidak di sorot

Itulah beberapa contoh efek-efek marquee yang bisa anda gunakan, anda bisa berexplorasi lebih jauh lagi. Silahkan anda bereksperimen sendiri.

http://www.margasatrya.com/belajar-membuat-text-berjalan-marquee.html


Command pembuka ditulis dengan tanda "<" kemudian tulis MARQUEE, tutup dengan ">"
Selanjutnya tulis kata yang akan ditampilkan.
Command penutup ditulis dengan tanda "<" kemudian tulis /MARQUEE, tutup dengan ">"
Standarnya teks akan bergerak dari kanan ke kiri...

Coba sebagai awal belajar MARQUEE

Selanjutnya kita beralih ke command DIRECTION

Command DIRECTION menunjukkan ke arah mana MARQUEE kita akan berjalan...
Secara default MARQUEE diset LEFT... Jadi berjalan dari kanan ke kiri dalam halaman...
Penggunaan command DIRECTION sama dengan diatas...
Hanya penambahan DIRECTION=[Arah Yang Di Kehendaki] setelah kata MARQUEE pada command pembuka.
DIRECTION yang dapat digunakan misalnya = RIGHT; LEFT; UP; DOWN

Contoh DIRECTION UP

Menyisipkan GAMBAR

Untuk menyisipkan gambar dapat digunakan command "<" trus ketik "IMG SRC=[Link yang dimaksud] dan tutup dengan ">"


GOOGLE Girl...!!!



Marquee 1.0

Marquee adalah teks berjalan lho
Marquee 1.0 ini merupakan marquee standar agar teks Anda bisa berjalan secara default (dari kanan ke kiri).

Tag Html
Teks Anda

Marquee 1.0.1

Marquee adalah teks berjalan lho
Marquee 1.0.1 adalah pengembangan dari 1.0, keistimewaannya jika Anda arahkan mouse pada teks tersebut maka dia akan istirahat dan berhenti dari perjalanannya yang panjang.

Tag Html
Teks Anda

Marquee 1.0.2

Marquee adalah teks berjalan lho
Marquee 1.0.2 jika Anda menggunakan teks Arabic yang dimulai dari kanan ke kiri, maka Anda membutuhkan Marque ini yang berjalan sebaliknya; dari kiri ke kanan, contoh dengan teks arabic:
مرقو ادلح تيكس برجالان

Tag Html
Teks Anda

Marquee 2.0

Marquee adalah teks berjalan lho
Marquee 2.0 Marquee ini tidak memiliki kemampuan magic seperti David Coperfield marquee sebelumnya yang bisa menembus ruang, Marquee 2.0 ini kerjaannya bolak-balik dari ruang kotak yang kasat mata. :)

Tag Html
Teks Anda

Marquee 2.0.1
Marquee adalah teks berjalan lho
Marque 2.0.1 Pengembangan dari marquee sebelumnya, dengan pancingan scrollamount dia menjadi sangat agresif :)
Marquee adalah teks berjalan lho

Tag Html
Teks Anda

Marquee 2.0.2
Marquee adalah teks berjalan lho
Marquee 2.0.2 Masih pengembangan dari Marquee 2.0 dengan sentuhan on-mouse-over stop dan on-mouse-out start, seperti marquee 1.0.1 jika Anda arahkan mouse pada teks maka dia akan berhenti.

Tag Html
Teks Anda

Marquee 3.0
Marquee adalah teks berjalan lho #1

Marquee adalah teks berjalan lho #2

Marquee adalah teks berjalan lho #3

Marquee adalah teks berjalan lho #4

Marquee adalah teks berjalan lho #5

Marquee adalah teks berjalan lho #6

Marquee adalah teks berjalan lho #7


Marquee 3.0 Dia adalah marquee climbing, marquee pendaki ini suka sekali ketinggian, sehingga kita lihat arah teksnya pun ke atas (up) :) . Jika Anda memiliki teks yang banyak, maka marquee ini merupakan pilihan yg tepat dan sangat cocok sebagai teman pendamping hidup Anda.

Tag Html
Teks Anda

Marquee 3.0.1
Marquee adalah teks berjalan lho #1

Marquee adalah teks berjalan lho #2

Marquee adalah teks berjalan lho #3

Marquee adalah teks berjalan lho #4

Marquee adalah teks berjalan lho #5

Marquee adalah teks berjalan lho #6

Marquee adalah teks berjalan lho #7


Marquee 3.0.1 Pengembangan dari marquee sebelumnya yang tidak mempunyai batas ruang, marquee ini kita batasi ruang kasatnya sehingga memliki height 100 saja. Demikian dengan kemampuan scrollamountnya kita perlambat. Dan kita kasih on mouse stop/start juga.

Tag Html
Teks Anda

Marquee 3.0.2
Marquee adalah teks berjalan lho #1

Marquee adalah teks berjalan lho #2

Marquee adalah teks berjalan lho #3

Marquee adalah teks berjalan lho #4

Marquee adalah teks berjalan lho #5

Marquee adalah teks berjalan lho #6

Marquee adalah teks berjalan lho #7


Marquee 3.0.2 Masih pengembangan dari marquee sebelumnya, hanya saja teks berada di tengah ruang kasat.
Tag Html

Teks Anda

Marquee 3.0.3
Marquee adalah teks berjalan lho #7

Marquee adalah teks berjalan lho #6

Marquee adalah teks berjalan lho #5

Marquee adalah teks berjalan lho #4

Marquee adalah teks berjalan lho #3

Marquee adalah teks berjalan lho #2

Marquee adalah teks berjalan lho #1


Marquee 3.0.3 Pengembangan juga dengan arah berlawanan dari marquee sebelumnya, marquee ini senang sekali berjalan menurun. Sehinggan teks yang kita lihat berjalan dari atas ke bawah. Kemampuan scrollamountnya tidak kita batasi sehingga terlihat agresif dengan ruang kasat yang kecil. Silahkan Anda perlambat sendiri.

Tag Html
Teks Anda
Digg it StumbleUpon del.icio.us

0 komentar:

Posting Komentar

 
Copyright 2010 TicKetinG
Carbon 12 Blogger template by Blogger Bits. Supported by Bloggermint