Thursday, 19 March 2015

Membuat Text Berjalan Menggunakan HTML

Macam-macam membuat text menjadi bergerak di Web

Marquee adalah suatu program HTML untuk membuat teks bisa bergerak atau berjalan. Program marquee ini banyak diminati dan di pakai oleh para blogger di dalam blognya karena sifat program ini yang dinamis serta menarik untuk di lihat disamping untuk menghemat tempat pada halaman blog.
Marquee ini bisa di buat dengan menggunakan tag. Atribut yang sering di gunakan adalah :


BGCOLOR
warna –> Untuk mengatur warna background (latar belakang) teks
DIRECTION
left/right/up/down –> Mengatur arah gerakan teks
BEHAVIOR
scroll/slide/alternate –> Untuk mengatur perilaku gerakan
 SCROLLMOUNT
angka –> mengatur kecepatan gerakan dalam pixel, semakin besa angka semajin cepat gerakannya
SCROLLDELAY
angka –> Untuk mengatur waktu tunda gerakan dalam mili detik
WIDTH
lebar –> Mengatur lebar blok teks dalam pixel atau persen


1. Text Bergerak Secara Marquee / Standar

Untuk membuat tulisan bergerak seperti diatas maka tinggal memasukkan kode html seperti dibawah ini :
<marquee>Contoh Text bergerak Standar</marquee>

2. Text Bergerak Setengah Layar

Cara ini tergantung pada div atau nav pengapit marquee tersebut,artinya jika selector div hanya 500px maka tulisan berjalan akan muncul pada pixel ke 250 - 0 (tengah ke kiri).
Kode htmlnya dibawah ini :
<marquee width="50%"> Contoh Text  Bergerak Standar width 50%</marquee>

3. Text Bergerak Dari Kanan ke Kiri

 Seperti halnya yang telah saya jelaskan diatas bahwa tulisan bergerak dari kanan ke kiri ini sama dengan yang standar,namun disini saya akan mencoba menambahkan kode htmlnya sedikit.
Kode htmlnya dibawah ini :
<marquee direction="left">Contoh Text Bergerak Dari Kanan ke Kiri</marquee>

4. Text Bergerak Dari Kiri ke Kanan

Cara ini masih sama dengan yang diatas cuma tinggal merubah yang semula left  menjadi right.
Untuk lebih jelasnya dapat dilihat kode html dibawah ini :
<marquee direction="right">Contoh Tulisan Bergerak Dari Kiri ke Kanan</marquee>

5. Text Bergerak Dengan Efek Memantul

Dalam hal ini kode html yang dibutuhkan yaitu behavior="alternate".Lebih lengkapnya lihat kode html dibawah ini :
<marquee behavior="alternate">Contoh Text Bergerak Dengan Efek Memantul</marquee>

6. Text Bergerak Dari Bawah ke Atas



Untuk kali ini hal yang perlu diperhatikan hanya menambahkan kode htmlnya dengan direction="up".
Liat kode html di bawah ini :
 <marquee direction="up">Contoh Text Bergerak Dari Bawah ke Atas</marquee>


7. Text Bergerak Dari Atas ke Bawah



Sama halnya dengan yang di atas cuma tinggal merubah valuenya yang semula direction="up" menjadi direction="down".Lebih jelasnya liat kode htmlnya dibawah ini :
<marquee direction="down">Contoh Text Bergerak Dari Atas ke Bawah</marquee>

8. Text Bergerak Lalu Berhenti




Mirip dengan kode sebelumnya yaitu membuat text memantul, yang membedakan hanya membuat tulisannya berhenti. ini kode htmlnya:
<marquee behavior="scroll">Contoh Text Bergerak Lalu Berhenti</marquee>







referensi:http://rahdikaa.blogspot.com/
  

No comments:

Post a Comment