Berbagai Macam Tulisan Bergerak Dengan Html

AksFullShare-Kali Ini saya ingin berbagi tentang bagaimana cara membuat teks Bergerak atau berjalan dengan Html dengan berbagai macam tipe gerak teksnya, nah berikut caranya :

1. Teks Marquee Biasa (Sederhana)

Adalah teks bergerak (marquee) yang paling dasar atau sederhana yang arah geraknya ke kiri.

Html/Kode :

<marquee>Teks Yang Anda Ingin Buat Bergerak</marquee>

Hasilnya Akan Seperti Ini :

Teks Yang Anda Ingin Buat Bergerak

2. Teks Marquee Direction Right (Kanan)

Adalah teks bergerak (marquee) yang arah geraknya ke kanan.

Html/Kode :

<marquee direction="right">Teks Yang Anda Ingin Buat Bergerak</marquee>

Hasilnya Akan Seperti Ini : 

Teks Yang Anda Ingin Buat Bergerak Kekanan

3. Teks Marquee Direction Up (Atas)

Adalah teks yang arah geraknya (marquee) ke Atas.

Html/Kode :

<marquee direction="up">Teks Yang Anda Ingin Buat Bergerak Ke Atas</marquee>

Hasilnya Akan Seperti Ini :

Teks Yang Anda Ingin Buat Bergerak Ke Atas

4. Teks Marquee Direction Down (Bawah)

Adalah teks yang arah geraknya (marquee) ke Bawah.

Html/Kode :

<marquee direction="down">Teks Yang Anda Ingin Buat Bergerak Ke Bawah</marquee>

Hasilnya Akan Seperti Ini :

Teks Yang Anda Ingin Buat Bergerak Ke Bawah

5. Teks Marquee Behavior Alternate (Bolak-Balik)

Adalah teks yang arah geraknya (marquee) Bolak-balik atau memantul

Html/Kode :

<marquee behavior="alternate">Teks Yang Anda Ingin Buat Bergerak Bolak-Balik atau Memantul</marquee>

Hasilnya Akan Seperti Ini :

Teks Yang Anda Ingin Buat Bergerak Bolak-Balik atau Memantul

6. Teks Marquee Scroolamount

Adalah teks yang kecepatan arah geraknya (marquee) Bisa di atur sesuai keinginan kita.

Html/Kode :

<marquee scrollamount="2">Teks Bergerak Lambat</marquee>

<marquee scrollamount="6">Teks Bergerak Sedang</marquee>

<marquee scrollamount="12">Teks Bergerak Cepat</marquee>

<marquee scrollamount="30">Teks Bergerak Sangat Cepat</marquee>

Hasilnya Akan Seperti Ini :

Teks Bergerak Lambat

Teks Bergerak Sedang

Teks Bergerak Cepat

Teks Bergerak Sangat Cepat

7. Teks Marquee Behavior Slide

Adalah teks yang hanya bergerak (marquee) sekali, kemudian langsung stop (berhenti).

Html/Kode :

<marquee behavior="slide">Teks Yang Anda Ingin Buat Bergerak</marquee>

Hasilnya Akan Seperti Ini :

Teks Yang Anda Ingin Buat Bergerak Sekali

8. Teks Marquee Biasa + Marquee Atas (Up)

Adalah teks yang bergerak (marquee) miring ke arah sudut kiri atas.

Html/Kode :

<marquee><marquee direction="up">Teks Yang Anda Ingin Buat Bergerak</marquee>

Hasilnya Akan Seperti Ini :

Teks Yang Anda Ingin Buat Bergerak

9. Teks Marquee Direction Right + Marquee Bawah (Down)

Adalah teks yang bergerak (marquee) miring ke arah sudut bawah.

Html/Kode :

<marquee direction="right" ><marquee direction="down">Teks Yang Anda Ingin Buat Bergerak</marquee>

Hasilnya Akan Seperti Ini :

Teks Yang Anda Ingin Buat Bergerak

10. Teks Marquee Direction Up (Atas) + Marquee Behavior Alternate Right

Adalah teks yang bergerak (marquee) dengan arah zig-zag atau tidak beraturan.

Html/Kode :

<marquee behavior="alternate" direction="up"><marquee direction="right" behavior="alternate">Teks Zig-Zag Yang Ingin Di Pasang</marquee></marquee>

Hasilnya Akan Seperti Ini :

Teks Zig-Zag Yang Ingin Di Pasang

11. Teks Marquee Direction Right (Kanan) + Marquee Biasa + Width

Adalah teks yang bergerak (marquee) Seperti sebuah tombol yang di tunjuk.

Html/Kode :

<marquee direction="right"  width="10%">Simbol Pertama</marquee>Klik Disini<marquee  width="10%">Simbol Ke-Dua</marquee>

Hasilnya Akan Seperti Ini :

>>>>Klik Disini <<<<

12. Teks Marquee Biasa + Marquee Direction Right (Kanan)+ Width

Adalah teks yang bergerak (marquee) yang bergerak seperti tombol juga namun arah geraknya kebalikan yang di atas.

Html/Kode :

<marquee width="10%">Simbol Pertama</marquee>Welcome To Aks Full Share<marquee direction="right" width="10%">Simbol Ke-Dua</marquee>

Hasilnya Akan Seperti Ini :

(((Welcome To Aks Full Share)))

Untuk Kombinasi lainnya tentu masih banyak lagi, tergantung kreatifitas sahabat semua.....

Sekian, dan Semoga bermanfaat buat anda juga....

4/05/2012