Cara Membuat Text Berjalan Pada Website atau Blog

Hi Web Developer! kembali lagi bersama guru design, kamu semua pasti pernah melihat kan tulisan berjalan di website/blog orang, terlihat cantik kalau di lihat-lihat.

Baiklah kali ini guru design akan berbagi tutorial tentang bagaimana cara membuat text berjalan tersebut di website/blog agan-agan semua. Langsung saja tanpa basa basi kita lihat tutorialnya ya:

Kita akan menggunakan tag marquee untuk menjalankan text-nya, silahkan tambahkan kode berikut ini di blog kalian ya.

Pertama

Tag marquee default nya seperti ini <marquee>Ini text marquee</marquee>

Disini kita akan membuat text berjalan dari kanan ke kiri dan kecepatannya 5, berarti kita menggunakan direction left lihat contoh berikut:

<marquee style='color:#00b0cf; font-size:14px' direction='left' scrollamount='5'>
   Seperti ini gan tulisannya dari kanan ke kiri
</marquee>

Seperti ini gan tulisannya dari kanan ke kiri speed 5

Keterangan

1. direction left = arah teks berjalan yaitu dari kiri ke kanan. Anda dapat merubah left menjadi right supaya text berjalan dari kanan ke kiri, up supaya text berjalan dari bawah ke atas, down supaya text berjalan dari atas ke bawah.
2. scrollamount 5 = kecepatan teks berjalan, semakin tinggi angkanya maka akan semakin cepat pula berjalannya begitupun sebaliknya.
3. color #00b0cf = mengubah warna font kode warna lainnya bisa klik disini 
4. font-size 14 = ukuran font (size).

 

Kedua

Kita akan membuat jeda satu detik pada marquee-nya:

<marquee style='color:#00b0cf; font-size:14px' scrolldelay='1000'>
   Seperti ini gan tulisannya menggunakan delay
</marquee>

Seperti ini gan tulisannya menggunakan delay

Keterangan

1. scrolldelay 1000 = memberi jeda 1 detik pada text marquee, semakin besar delay-nya maka text berjalan semakin lambat.

Ketiga

Kita akan memberi 3 perulangan (loop) pada marquee-nya:

<marquee style='color:#00b0cf; font-size:14px' loop='3'>
   Seperti ini gan tulisannya menggunakan loop
</marquee>

Seperti ini gan tulisannya menggunakan loop

! Jika kalian tidak melihat demo diatas coba refresh browser anda, karena demo akan berjalan tiga kali (looping) kemudian akan hide (tidak terlihat).

Keterangan

1. loop 3 = ulangi 3 kali, jadi text marquee akan di ulang sebanyak 3 kali setelah itu akan hide (menghilang).

Keempat

Kita akan membuat prilaku atau gaya (behavior) pada marquee-nya:

<marquee style='color:#00b0cf; font-size:14px' behavior='scroll'>
   Text marquee menggunakan gaya scroll
</marquee>

  Text marque menggunakan gaya scroll

<marquee style='color:#00b0cf; font-size:14px' behavior='slide'>
   Text marquee menggunakan gaya slide
</marquee>

  Text marquee menggunakan gaya slide

! Jika kalian melihat demo berhenti, coba refresh browser anda, karena demo akan berhenti jika menabrak sisi kanan atau kiri.

<marquee style='color:#00b0cf; font-size:14px' behavior='alternate'>
   Text marquee menggunakan gaya alternate
</marquee>

  Text marque menggunakan gaya alternate

Keterangan

1. behavior alternate = text marquee akan memantul jika menabrak sisi kanan dan kiri (sama seperti default).
2. behavior scroll = text marquee akan menghilang jika menabrak sisi.
3. behavior slide = text marquee akan berhenti jika menabrak sisi kanan atau kiri.

Tarakhir

Kita akan membuat text marquee-nya menjadi runer-miror, tapi kali ini sedikit berbeda karena kita menggunakan tambahan style css untuk mengatur tex- nya menjadi mirror berikut kodenya:

<div id="text-runing">
<marquee class="text1" direction="left" width="50%">
    <b>&lt;&lt; Guru Design &gt;&gt;</b>
  </marquee>
  <marquee class="text2" direction="left" width="50%">
    <b>&lt;&lt; Guru Design &gt;&gt;</b>
  </marquee> 
</div>

<style type="text/css">
  .text1,.text2{
    float:left;
  }
  .text2{
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform: matrix(-1, 0, 0, 1, 0, 0);
  }
  #text-runing{
    width:100%;text-align:center;font-size:14px; color:#00b0cf;
  }
</style>

<< Guru Design >> << Guru Design >>

Terimakasih sudah mengikuti tutorialnya semoga bermanfaat.