Belajar Membuat Text Berjalan (marquee)

in Web Desain | 43 Comments
Belajar Membuat Text Berjalan (marquee)
Belajar Membuat Text Berjalan - marquee

by margasatrya.com

Iseng-iseng hari ini saya sedikit mempelajari mengenai text efek yang satu ini. Text efek ini disebut marquee, lalu apa itu 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 :mrgreen: ), 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 :D

  • 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

<marquee direction="right" scrollamount="2"> Contoh Marquee dari kiri ke kanan </marquee>

Contoh Marquee dari kiri ke kanan

Contoh marquee dari kanan ke kiri

<marquee direction="left" scrollamount="2"> Contoh Marquee dari kanan ke kiri </marquee>

Contoh Marquee dari kiri ke kanan

Contoh marquee dari atas ke bawah

<marquee direction="down" scrollamount="2" height="100" width="50%"> Contoh Marquee dari atas ke bawah </marquee>

Contoh Marquee dari atas ke bawah

Contoh marquee dari bawah ke atas

<marquee direction="up" scrollamount="2" height="100" width="50%"> Contoh Marquee dari bawah ke atas </marquee>
Contoh Marquee dari bawah ke atas

Contoh marquee dengan menggunakan background biru dan warna font putih

<font color="white"><marquee direction="right" scrollamount="2" bgcolor="blue"> Contoh Marquee dengan menggunakan background biru dan warna font putih </font></marquee>
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

<marquee direction="down" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()" height="100"> Contoh marquee berhenti bergerak ketika di sorot mouse dan bergerak kembali ketika sudah tidak di sorot </marquee>

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.

Selamat mencoba !

Penulis: Satrya Bima - http://www.margasatrya.com

Satrya, founder margasatrya.com yang saat ini sedang bekerja di salah satu provider theme e-commerce, Tokokoo.com sebagai Front End Developer. Mau mengenal saya lebih jauh ? Silahkan follow twitter atau kontak saya

Berlangganan Artikel Gratis !

  • http://Jhezer.web.id JhezeR

    Marque juga saya gunakan di sidebar blog plg atas, dlu pas awal2 keluar marque menjdi pilihan animasi ala html.

  • http://desaindigital.com Jeprie

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

    Yang ini tidak kelihatan.contohnya.

    • http://www.margasatrya.com Satrya

      Masa mas ? atau lihat di sidebar saja, yang random post itu.

    • ardianzzz

      Cross browser compatibilities?

      Btw, saya tidak akan menggunakan marquee atau menganjurkan penggunaannya.
      :D

      • http://www.margasatrya.com Satrya

        belum di tes mas.
        Eh, saya juga tidak menganjurkan koq, hanya sedikit mempelajari dan menuliskannya :mrgreen:

    • http://desaindigital.com Jeprie

      Liat saja di sini, http://dl.dropbox.com/u/7116487/satrya-01.jpg dan http://dl.dropbox.com/u/7116487/satrya-02.jpg. Isi komentar juga tidak keluar. Di sni menggunakan Chrome.

      • http://www.margasatrya.com Satrya

        Ups, maaf mas. Pada “Contoh marquee dengan menggunakan background biru dan warna font putih” saya menggunakan tag < font > , ternyata di chrome beleber putihnya ampe ke kotak komentar :mrgreen:

        Sdh betul skr mas.

      • ardianzzz

        Tag <font> bukan tag XHTML.
        Saya sih sangat setuju jika marquee dideprecated saja, dihapus dari referensi (X)HTML sekalian. Bukankah sudah ada JavaScript.

        • http://www.margasatrya.com Satrya

          Iya sudah saya ganti mas.

          Kmrin juga sya menemukan jquery marquee, tapi tetap mas pemanggilannya mesti pakai tag < marquee >

  • http://www.isnuansa.com isnuansa

    Saya pribadi nggak suka sama si Marki ini Sat. Nggak minat menampilkannya di blog. Hihihi…

    Makin lengkap aja tutorial di blog ini. Eh, kemarin ada yang muji lagi, katanya blogku terlihat profesional. \m/

    • http://www.margasatrya.com Satrya

      Alhamdulilah mba :)

  • http://www.gemilang.tv Indovision

    efek marquee sy gunakan jika memang di perlukan sesuai kondisi saja.

  • http://kafegue.com/ iskandaria

    Efek ini sebisa mungkin dipakai pada satu elemen atau pada satu menu saja, biar tidak terlalu banyak “gangguan” ketika pengunjung hendak menyimak isi blog kita. Misalnya sebagai ucapan selamat datang (pada header). Atau pada salah satu navigasi saja :)

    Oya, kelemahannya mirip tabs-menu kayaknya. Ketika loading belum tuntas secara sempurna, tampilan jadi memanjang.

  • Andank

    Saya pernah menggunakannya,tapi membuat lola blog saja.

  • http://ariefrizky.com Arief Rizky Ramadhan

    marquee cocok juga dipakai untuk kumpulan artikel hehe siapa tau bisa nambahin pageview blog.. tapi sayang masih manual jadi harus ngetik 1-1 hehe..

  • beritague

    Wah boleh juga ne infonya Sat. ntar tak dicaba pasang di SB.

  • BlogKlik

    wah.. mantap banget nih mas… ditunggu tutorial selanjutnya..

  • http://www.nyubi.com/ Business and Finance

    berguna atau tidak berguna dianjurakan atau tidak terserah yang mau pakai saja ;)

    • http://www.margasatrya.com Satrya

      Moga baca yg komen nih.
      Sebenarnya anda laki apa perempuan ya ?
      Saya bingung nih, mau panggil mas fotonya cewe, mau panggil mba takut cuma iseng2 aja pasang foto cewe :mrgreen:

      Jawab yah, soalnya saya lihat anda sering berkomentar disini :D

    • tomi

      nyubi keliatannya cowok mas.. saya soalnya pake mas kok :D

      • http://www.margasatrya.com Satrya

        Oh gitu, abis tiap koment disini, fotonya ganti2 mulu. cewe semua lagi,. weleh2 :lol:

  • http://www.bloggerwonosobo.com/ WONOSOBO

    wah keren nih…. dah dicoba,,,, bisa berkreasi nih pake teks berjalan…. thanks mas… salam kenal….

  • Agus Siswoyo

    sayangnya saya belum tertarik memakai untuk blog saya. masih suka yang simpel uey. :D

  • http://kaget.net Kaget

    Oo,. jadi cuma itu code-nya.
    Saya baru tau,…. simple dan hemat kapasitas.
    Makasih infonya, Mas.

  • Aldy

    Belum pernah mencoba, takut loading blog menjadi lelet :(

  • indam

    tulisan ini mengingatkan saya ketika pertama kali belajar html dan masih mengunakan blogspot.

  • Mega

    saia mo komen lagi :) namun sayang ditangkap aki :(

    • http://www.margasatrya.com Satrya

      Gak ada koq. Eh btw namanya ganti skr jadi MEGA :mrgreen:
      Ini mba apa mas sih ? :lol:

  • http://fashionpria.com Tips Fashion Pria

    Hmm tips marki yang menarik, tetapi sepertinya sudah mulai di tinggalkan.
    Anyway thanks.

  • kampus blog

    saya dulu awalnya pake marquee html jg mas.. tp trus tak lepas aja.. kurang enak.. malah bikin pusing yang baca :D

  • ralarash

    nice info…
    nanti dicoba deh di di blog saya…

  • http://www.pumpkinzfreak.com Ahmed

    Btw, script marquee-nya di paste di mana mas??! :)

  • http://www.weatherillbrothers.co.uk Drake

    Well , I don’t understand what you say [I speak english] yet I did manage to use the codes , so many thanks to you.

  • http://bagasfantasy.blogspot.com bagas

    sangat membantu gan…
    Semoga sukses dgn blognya, kunjung balik ya ^^

  • http://bagasfantasy.blogspot.com bagas

    sangat membantu gan..
    kunjung balik ya gan

  • animasine

    nice sharing bro… salam kenal.. kunjungan balik ya

  • http://www.kellykite.com/ teguh

    sangat menarik,,,,langsung ku coba

  • tombolcom

    hxxp://tombolcom.blogspot.com/
    mengungkap rahasia internet secara GRATIS…datanglah…datanglah….
    he…he…heee…salam kenal bosss…

  • Guest

    Contoh Marquee dari bawah ke atas

  • evie

    ough gtoc cara nya…

  • http://shantyeni.wordpress.com shanty

    cara nya gmana tha?,,,maksud nya urut”an nya gitu…gmana?????????

  • Pingback: Belajar Membuat Text Berjalan (marquee) : jusei

  • Karenapriliabear

    gimana sih caranya saya kok masih tetap nggak ngerti ya?