Bagian 11. Membuat Animasi Teks Bergerak

Baca Juga

Salah satu cara untuk menarik perhatian pada suatu kata atau kalimat dalam suatu blog atau website adalah dengan membuat variasi pada kata atau kalimat tersebut. Diantaranya dengan menggunakan Marquee / text berjalan ( pergerakkan text dari kiri ke kanan atau kanan ke kiri, ke atas ke bawah atau sebaliknya, juga gabungan atau variasi dari keduanya).

Memanfaatkan marque teks berjalan adalah dengan tag <marquee>

Contoh penggunaan :




<!DOCTYPE html>
<html>
<head>
<title>Membuat Animasi Marquee</title>
</head>
<body>
<p>Bergerak dari kanan ke kiri</p>
<marquee> Kata / kalimat yang akan ditampilkan </marquee>
</body>
</html>

Priview

Bergerak dari kanan ke kiri
Kata / kalimat yang akan ditampilkan

Contoh lain penggunaan marque :




<!DOCTYPE html>
<html>
<head>
<title>Membuat Animasi Marquee</title>
</head>
<body>
<p>Bergerak dari kiri ke kanan</p>
<marquee direction="right"> Kata / kalimat yang akan ditampilkan  </marquee>
<p>Bergerak dari kanan ke kiri dan dari kiri ke kanan</p>
<marquee behavior="alternate"> Kata / kalimat yang akan ditampilkan </marquee>
<p>Bergerak dari bawah ke atas</p>
<marquee direction="up">Kata / kalimat yang akan ditampilkan
</marquee>
<p>Bergerak dari bawah ke atas</p>
<marquee direction="up">Kata / kalimat yang akan ditampilkan
</marquee>
<p>Bergerak dari bawah ke atas dan dari Atas ke Bawah</p>
<marquee behavior="alternate" direction="up">Kata / kalimat yang
akan ditampilkan </marquee>
<p>Bergerak Zigzag</p>
<marquee behavior="alternate" direction="up" width="80%"><marquee
direction="right"> Kata / kalimat yang akan ditampilkan
</marquee></marquee>
</body>
</html>

Priview

Bergerak dari kiri ke kanan
Kata / kalimat yang akan ditampilkan Bergerak dari kanan ke kiri dan dari kiri ke kanan
Kata / kalimat yang akan ditampilkan Bergerak dari bawah ke atas
Kata / kalimat yang akan ditampilkan Bergerak dari bawah ke atas
Kata / kalimat yang akan ditampilkan Bergerak dari bawah ke atas dan dari Atas ke Bawah
Kata / kalimat yang akan ditampilkan Bergerak Zigzag
Kata / kalimat yang akan ditampilkan

Contoh yang lebih kompleks :




<!DOCTYPE html>
<html>
<head>
<title>Membuat Animasi Marquee</title>
</head>
<body>
<marquee behavior="alternate" bgcolor="#0099FF">ANIMASI
MARQUEE(ALTERNATE)</marquee><br><br>
<marquee behavior="scroll" bgcolor="#0099FF"
direction="left">ANIMASI MARQUEE(SCROLL)</marquee><br><br>
<marquee behavior="slide" bgcolor="#0099FF" >ANIMASI
MARQUEE(SLIDE)</marquee><br><br>
</body>
</html>

Priview

ANIMASI MARQUEE(ALTERNATE)

ANIMASI MARQUEE(SCROLL)

ANIMASI MARQUEE(SLIDE)

Download source code latihan

Selamat mencoba..