Membuat Efek Animasi Pada Teks
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? Mari saya jelaskan fungsi dan peranan dari kedua tag tersebut di bawah ini.
Efek Animasi dengan menggunakan "marquee"
Marquee merupakan suatu tag HTML yang dapat memberikan efek gerak suatu teks dari berbagai arah. Berikut cara penulisan tag marquee dan efek yang ditimbulkannya:
<marquee>Welcome to my blog</marquee>Contoh di atas merupakan suatu bentuk kode dasar dari tag marquee. Agar 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. Agar saya tidak susah-susah menjelaskannya kepada kalian. Silahkan lihat saja 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 direction='down'>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> |
Dari contoh diatas, kalian tentunya sudah mengetahui fungsi dari setiap atribut-atribut marquee di atas. Atribut tersebut dapat kalian gabungkan sehingga membentuk tampilan gerak yang berbeda. Sebagai contoh, lihat di bawah ini.
<marquee direction='up' behavior='alternate' scrollamount='35'>Welcome to my blog</marquee> |
Untuk gabungan yang lainnya silahkan kreasikan sendiri sesuai dengan tampilan yang kalian inginkan.
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>Atau dapat juga ditulis dengan kode sebagai berikut:
<span style='text-decoration:blink;'>Welcome to my blog</span>Welcome to my blog
Poskan Komentar