Untuk menghiasi blog atau web, banyak cara yang bisa kita lakukan, termasuk memberi effek animasi teks berjalan. Dan untuk membuat teks berjalan caranya juga sangat mudah, baik dengan html, css, ataupun java scrip.

Dan kali ini saya akan coba memberikan  panduan cara membuat teks animasi berjalan dengan html. Animasi teks berjalan dengan html, tag dasar yang digunakan adalah "marquee". Marquee sendiri memiliki beberapa atribut dasar seperti "behavior, direction, scroll, delay, dan event mouse.

Langsung saja ya...,
Berikut ini adalah contoh penggunaan "marquee" pada HTML, dan sengaja saya sajikan beberapa contoh marquee, agar lebih mudah membedakan effek yang dihasilkan :

1. behvior=scroll.
Teks dengan atribut ini akan berjalan terus hingga habis teks yang ditampilkan dan mengulanginya lagi dari awal.

Teks Berjalan Terus

<marquee behavior=scroll>Tutorial Blog</marquee>

Tutorial Blog

Teks Berjalan sesuai arah yang ditentukan


<marquee behavior=scroll direction=left>Tutorial Blog</marquee>

Tutorial Blog


Teks Berjalan sesuai arah yang ditentukan dengan effek delay 

<marquee behavior=scroll direction=left scrolldelay=700 onmouseover=stop() onmouseout=start() >Tutorial Blog</marquee>

Tutorial Blog


2. behavior=alternate.
Atribut ini akan menampilkan animasi teks berjalan dari kanan ke kiri dan kemudian kembali lagi kekanan.
Teks Berjalan Bolak - balik

<marquee behavior=alternate>Tutorial Blog</marquee>

Tutorial Blog


Teks Berjalan Bolak - balik sesuai arah yang ditentukan

<marquee behavior=alternate direction=left>Tutorial Blog</marquee>

Tutorial Blog


 Teks Berjalan Bolak - balik sesuai arah yg ditentukan, dgn effek delay

<marquee behavior=alternate direction=left  scrolldelay=700 onmouseover=stop()

onmouseout=start()>Tutorial Blog</marquee><br />

Tutorial Blog



3. behavior=slide
Atribut ini akan menampilkan animasi teks berjalan hingga habis area lalu berhenti.

Teks Berjalan lalu berhenti

<marquee behavior=slide>Tutorial Blog</marquee>

Tutorial Blog


Teks Berjalan lalu berhenti sesuai arah yang ditentukan

<marquee behavior=slide direction=left>Tutorial Blog</marquee>

Tutorial Blog


Teks Berjalan lalu berhenti sesuai arah yg ditentukan, dgn effek delay

<marquee behavior=slide direction=left  scrolldelay=700 onmouseover=stop() onmouseout=start() >Tutorial Blog</marquee>

Tutorial Blog


Catatan :

"direction"
berfungsi menentukan arah animasi teks akan berjalan yaitu right (kanan), left (kiri), up (keatas), dan down (kebawah).

"scroldelay"
berfungsi menentukan kecepatan animasi berjalan, semakin besar nilainya maka akan semakin cepat jalannya animasi.

"onmouseover=stop()"
Berfungsi menghentikan teks atau animasi yang sedang berjalan, ketika cursor mouse kita arahkan diatas teks atau animasi berjalan tersebut.

"onmouseout=start()"
Berfungsi akan kembali menjalankan teks atau animasi, jika cursor mouse tidak berada di atas teks atau animasi berjalan tersebut.

Anda bisa memberi variasi teks sesuai selera, silahkan anda kreasi sendiri.

Semoga bermanfaat ya......
Jangan lupa tinggalin komentarmu lho.....Terima kasih.


Mohon bantuannya untuk memperbaiki blog ini.


Jika Anda menemukan hal yang kurang berkenan atau tutorial yang belum bisa anda aplikasikan, Silahkan hubungi saya dengan menggunakan fasilitas Layanan umum. Dan saya akan selalu berusaha membalas keluhan anda serta memperbaiki kesalahan seceparnya.
Dan apabila anda merasa artikel /atau tutorial ini bermanfaat, silahkan bagikan ke teman Anda lewat tombol-tombol di disebelah kanan atas pada halaman ini...Terima kasih.


1 komentar:

  1. makasih cak, tutotialnya....
    boleh ndak saya posting diblog saya ?

    BalasHapus