19 Januari 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 komentar:

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

    BalasHapus
  2. @ aYuNks, sama-sama...

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

    BalasHapus
  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.

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

    BalasHapus
  6. cara membesarkankan font nya bagai mana mas

    BalasHapus
  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

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

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

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

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

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

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

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

    BalasHapus
  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!

    BalasHapus
  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

    BalasHapus
  16. tanks ya sahabat .....

    BalasHapus
  17. tahnk's infonya
    kunjungi balik http://aldyoke.blogspot.com

    BalasHapus
  18. Makasi y sobat ats infonya.....!!!!!!!!!!!!!!!

    BalasHapus
  19. klo supaya berwarna gmna?

    BalasHapus
  20. TRIMAKASIH ATAS PERTUNJUKANNYA

    BalasHapus
  21. kenapa gak bis
    aku udah berapa x

    BalasHapus
    Balasan
    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.

      Hapus
  22. diciba gaand
    http://lite-education.blogspot.com/

    BalasHapus
  23. thank bro....
    semoga lebih banyak berkarya,,,ya
    For Rif_Q

    BalasHapus
  24. THANKS INFONYA GAN,,,

    BalasHapus

Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.