19 January 2010

Cara Membuat Animasi Teks Berjalan / Bergerak

Dalam postingan kali ini saya mencoba berikan tips tentang Cara membuat animasi teks yang bergerak. Teks berjalan caranya tidaklah begitu rumit, kita hanya perlu memahami mengenai  fungsi dari kode-kode yang bisa membuat object tersebut bergerak.seperti marquee, behavior,scroll amount dan lain sebagainya.

Dibawah ini adalah beberapa contoh Animasi Teks yang menggunakan efek marquee. untuk anda yang berminat,silahkan anda copy kodenya kemudian anda paste ke gadget html anda.
Teks Berjalan Bolak Balik dari Kiri - kanan
Ilmu Itu Murah Maka Amalkanlah
<marquee behavior="alternate" direction="right"
scrollamount="5" scrolldelay="10" >Ilmu Itu Murah Maka Amalkanlah</marquee>

Teks Berjalan Dari kanan kekiri secara bersambung
Ilmu Itu Murah Maka Amalkanlah
<marquee behavior="scroll" direction="left" scrollamount="5"
scrolldelay="10" >Ilmu Itu Murah Maka Amalkanlah</marquee>

Teks Berjalan dari kanan kekiri 10 kali
Ilmu Itu Murah Maka Amalkanlah
<marquee behavior="slide" bgcolor="" direction="left"
loop="10" scrollamount="5" scrolldelay="10">Ilmu Itu Murah Maka Amalkanlah</marquee>

Teks Berjalan dengan efeks Bounce atau ZIG ZAG
Ilmu Itu Murah Maka Amalkanlah
<marquee
behavior="alternate" direction="up" scrollamount="5" scrolldelay="10"
>Ilmu Itu Murah Maka Amalkanlah</marquee>

Teks Berjalan Berjalan Bolak balik dari bawah ke atas
Ilmu Itu Murah Maka Amalkanlah
<marquee
behavior="alternate" direction="up" scrollamount="5" scrolldelay="10" >Ilmu
Itu Murah Maka Amalkanlah</marquee>

Teks Berjalan Berjalan dari bawah ke atas secara bersambung
Ilmu Itu Murah Maka Amalkanlah
<marquee behavior="scroll" direction="up"
style="text-align: center;" scrollamount="5" scrolldelay="10" >Ilmu Itu Murah
Maka Amalkanlah</marquee>

Teks Berjalan Berpencar
Ilmu Itu Murah Maka Amalkanlah Ilmu Itu Murah Maka AmalkanlahIlmu Itu Murah Maka Amalkanlah Ilmu Itu Murah Maka Amalkanlah
<marquee direction="Up" style="text-align: center;">Ilmu
Itu Murah Maka Amalkanlah</marquee> <marquee direction="Left"
style="text-align: center;">Ilmu Itu Murah Maka Amalkanlah</marquee><marquee
direction="right" style="text-align: center;">Ilmu Itu Murah Maka Amalkanlah</marquee>
<marquee direction="down" style="text-align: center;">Ilmu Itu Murah Maka
Amalkanlah</marquee>

*Keterangan :
  Ganti Tulisan "Ilmu Itu Murah Maka Amalkanlah" dengan Kalimat Yang lain.

Selamat Mencoba.

28 comments:

  1. makasih yahh sy jg pemula ni bikin2 ky gni mksh yahhh ats ptunjuknya

    ReplyDelete
  2. @ aYuNks, sama-sama...

    ReplyDelete
  3. emmm nak tanya kenapa saya buat semua tak jadi :(

    ReplyDelete
  4. @ash_asrah, buatnya di mana? sidebar apa halaman posting..
    kalau di halaman posting jangan pake compose tapi html, bila dipasang pada sidebar juga sama pake kode html. demikian mudah-mudahan jelas.

    ReplyDelete
  5. alhamdullillah setelah berkelana cukup di google, akhirnya ketemu juga... teks berjalan ku temukan kau. THX INFONYA..

    ReplyDelete
  6. cara membesarkankan font nya bagai mana mas

    ReplyDelete
  7. @AQIL ARROFI, cara membesarkan font nya dengan menambahkan css,
    font-size: 20px;

    Keterangan:
    20px bisa diganti sesuka anda, semakin besar angkanya, semakin besar pula font yang terbentuk.
    mudah-mudahan puas dengan jawaban saya.thanks

    ReplyDelete
  8. kalo mau teks nya digati sama gambar bisa ngak, mas? mohon petunjuknya....nuhun

    ReplyDelete
  9. @Rochmat Darodjat, bisa mas tinggal ganti teks dengan kode url gambar seperti ini :

    <img src="urlgambar.jpg" alt="" border="0" />

    ReplyDelete
  10. Mas saya mw nanya membuat tema bergerak-gerak yang ada gambar kupu-kupunya gimana?

    ReplyDelete
  11. @HanisaRosa WebSite, googling aja dengan kata kunci kupu-kupu beterbangan di blog

    ReplyDelete
  12. terimakasih sahabat,,,, saya coba tipsnya ternyata langsung berhasil sekali lagi terimakasih yaaaa

    ReplyDelete
  13. Thx Post nya Gan...
    Jgn Lupa Kungjungi Blog ane ya: http://blognya-drabong.blogspot.com/ :D

    ReplyDelete
  14. Gan klu teks berjalannya biar ada di tabs iitu mastenya link tadi dmana?
    ama cara ngasih gambar bergerak di pojok gmana gan?
    thanks sebelumnya!

    ReplyDelete
  15. @Ahmad Fauzan, baca postingan Memasang search di samping tab linklist.
    untuk gambar bergerak di pojok, googling dengan kata kunci floating image. maaf tidak bisa dijelaskan disini karena terlalu panjang

    ReplyDelete
  16. tahnk's infonya
    kunjungi balik http://aldyoke.blogspot.com

    ReplyDelete
  17. Makasi y sobat ats infonya.....!!!!!!!!!!!!!!!

    ReplyDelete
  18. klo supaya berwarna gmna?

    ReplyDelete
  19. TRIMAKASIH ATAS PERTUNJUKANNYA

    ReplyDelete
  20. kenapa gak bis
    aku udah berapa x

    ReplyDelete
    Replies
    1. intan'myiintan :)dibaca baik-baik dan pelan-pelan, perhatikan code-nya, mungkin ada satu atu dua huruf yang tertinggal sehingga teksnya tidak bisa berjalan.

      Delete
  21. diciba gaand
    http://lite-education.blogspot.com/

    ReplyDelete
  22. thank bro....
    semoga lebih banyak berkarya,,,ya
    For Rif_Q

    ReplyDelete
  23. THANKS INFONYA GAN,,,

    ReplyDelete

Note: Only a member of this blog may post a comment.