Animasi teks merupakan suatu bentuk teks yang dapat bergerak baik itu dari kiri, kanan, atas dan bawah dalam suatu template blog. Untuk membuat animasi teks tersebut kita membutuhkan tag HTML yang dapat memberikan efek animasi pada suatu teks. tag HTML tersebut adalah "marquee" dan "blink". Nah bagaimana cara kerja kedua tag tersebut?
Efek Animasi dengan menggunakan
Efek Animasi dengan menggunakan "marquee"
Marquee merupakan suatu tag HTML yang dapat membuat efek gerak suatu teks dari berbagai arah. Berikut ini cara penulisan tag marquee dan efek yang ditimbulkan
<marquee>Welcome to my blog</marquee>
Contoh ini atas merupakan suatu bentuk kode dasar dari tag marquee. Supaya tampilannya lebih menarik lagi, maka kita memerlukan atribut-atribut dari tag marquee. Apa saja atribut-atribut tersebut? Diantaranya ada
direction, behavior, scrollamount, scrolldelay, loop dan bgcolor. untuk lebih jelasnya lihat contoh penulisan kode dan efek yang ditimbulkan dari masing-masing atribut marquee di bawah ini.<marquee direction='right'>Welcome to my blog</marquee><marquee direction='left'>Welcome to my blog</marquee><marquee direction='up'>Welcome to my blog</marquee> |
<marquee behavior='scroll'>Welcome to my blog</marquee><marquee behavior='slide'>Welcome to my blog</marquee><marquee behavior='alternate'>Welcome to my blog</marquee> |
<marquee scrollamount='20'>Welcome to my blog</marquee><marquee scrollamount='50'>Welcome to my blog</marquee> |
<marquee scrolldelay='150'>Welcome to my blog</marquee><marquee scrolldelay='200'>Welcome to my blog</marquee> |
<marquee loop='3'>Welcome to my blog</marquee><marquee loop='5'>Welcome to my blog</marquee> |
<marquee bgcolor='yellow'>Welcome to my blog</marquee><marquee bgcolor='blue'>Welcome to my blog</marquee> |
Efek Animasi dengan menggunakan
"blink"
Blink merupakan suatu tag HTML yang dapat memberikan efek berkedip dari suatu teks. Berikut cara penulisan tag blink dan efek yang ditimbulkannya:
<blink>Welcome to my blog</blink>
Sobat dapat juga menulisnya dengan kode sebagai berikut:
<span style='text-decoration:blink;'>Welcome to my blog</span>
Demikian Semoga Bermanfaat...
1 komentar:
nyimak aja Gan...sembari mengingat.
Matur Thankyu
Terima kasih atas kunjungannya, silahkan berkomentar sesuai topik. Menuliskan link aktif tidak akan ditampilkan dalam komentar.Terima Kasih.