vaniardiansyah.blogspot.com : Animasi Text Di HTML
Animasi merupakan bagian yang memperindah web sehingga pengunjung merasa tidak bosan dalam melihat web tersebut, html menyediakan beberapa animasi bawaan yang dapat di gunakan dalam penulisan text pada halaman web. Berikut beberapa animasi yang dapat di gunakan dalam html :
| 1. |
Text Berkedip |
|
Text dapat dibuat berkedip dengan menggunakan tag blink, tetapi sekarng text blink sudah jarang di gunakan karena tidak support dengan web browser versi terbaru, dikarenakan wen browser versi terbaru focus terhadap support HTML 5 yang merupakan versi terbaru HTML.
Berikut contoh penulisan blink :
<blink> Ini text blink </blink>
|
| 2. | Marquee |
|
Tag marquee membuat text dapat berjalan, adabeberapa atribut yang dapat dipilih jika ingin menggunakan marquee. Atribut-atribut pada taq marquee:
| Width |
: |
Digunakan untuk menentukan lebar marquee |
| Height |
: |
Digunakan untuk menentukan tinggi marquee |
| Direction |
: |
Digunakan untuk menentukan arah gerak dari tampilan marquee |
| Behaviour |
: |
Digunakan untuk menentukan bagaimana tampilan bergerak |
| Scroll Delay |
: |
Digunakan untuk menentukan jeda waktu antara tiap gerakan dari tampilan. Nilai yang diisi untuk atribut ini adalah berupa angka dalam mili detik. |
| Scrollamount |
: |
Digunakanuntuk menentukan jauhnya lompatan untuk setiap gerakan |
| Bgcolor |
: |
Digunakan agar marquee menghasilkan jalur gerakan memiliki warna |
| Hspase |
: |
Digunakan untuk memberikan jarak antara tampilan bergerak dengan tulisan yang ada disamping kanan dan kiri tulisan. |
| Vspase |
: |
Digunakan untuk memberikan jarak antara tampilan bergerak dengan tulisan yang ada diatas dan dibawah tulisan. |
| Loop | : |
Digunakan untuk mengatur pengulangan dari taq marquee.
|
Berikut Contoh scrip penggunaan marquee :
| 1. |
Text berjalan dari kiri ke kanan |
|
<marquee direction="right">Text ini berjalan ke kanan</marquee> |
| 2. |
Text berjalan dari kanan ke kiri |
|
<marquee direction="left">Text ini berjalan ke kiri</marquee> |
| 3. |
Text berjalan dari atas ke bawah |
|
<marquee direction="up">Text ini berjalan ke bawah</marquee> |
| 4. |
Text berjalan dari bawah ke atas |
|
<marquee direction="up">Text ini berjalan ke atas</marquee>
|
| 5. |
Text berjalan dari atas ke bawah dengan dipantulkan |
|
<marquee direction="up" behavior="alternate" >Text ini berjalan dari atas ke bawah dengan dipantulkan</marquee> |
| 6. |
Text berjalan zigzag |
|
<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right">Text ini berjalan zigzag</marquee></marquee>
|
| 7. |
Text berjalan Text zigzag atas ke bawah td>
|
|
<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right" behavior="alternate">Text ini berjalan zigzag dari atas ke bawah</marquee></marquee> |
| 8. |
Text panah
|
|
<marquee behavior="alternate" width="10%">>></marquee>Text ini di apit kedua panah<marquee behavior="alternate" width="10%"><<</marquee> |
| 9. |
Text background berwarna animasi
|
|
<font ><marquee direction="left" style="background:BLUE">Text Bacground dengan warna</marquee></font> |
| 10. |
Text animasi border
|
|
<marquee style="border:BLUE 2px SOLID">Text animasi border</marquee> |
| 11. |
Text hidden marquee
|
|
<marquee behavior="alternate"><marquee width="150">text hidden</marquee></marquee>
|
| 12. |
Text animasi gelombang
|
|
<marquee behavior=alternate direction=up scrollamount=2 scrolldelay=65 height=80 style="Text- align;filter:wave(add=0,phase=1, freq=1,strength=15,color=.FFFFFF)"><center>Text animas<br>gelombang</c enter></marquee> |
|
Tidak ada komentar :
Posting Komentar