phpcoding: Membuat Text Berjalan dengan CSS

Cara Membuat Tulisan Berjalan Dengan HTML Marquee

Dalam html sebelum versi 5 ada taq <marquee> yang dapat digunakan untuk membuat teks maupun gambar berjalan. Yang secara default teks / gambar tersebut akan berjalan dari kanan ke kiri.

Bagaimana cara menggunakan tag marquee?…

Sebenarnya itu sangat mudah. Kita cukup menulis 3 bagian seperti ini

<marquee> (tag pembuka)
Isi (bisa berupa teks / gambar) yang ingin dibuat berjalan.
</marquee> (tag penutup)

Dan kalau ditulis menjadi seperti ini

<marquee>Isi</marquee>

Contoh 1 : Tulisan / teks berjalan

<marquee>Contoh tulisan berjalan</marquee>

Contoh lebih lengkapnya seperti ini

<!DOCTYPE html>
<html>
<head>
<title>Cara Bikin Teks Berjalan / Bergerak</title>
</head>
<body>
<h1>Cara Bikin Teks Berjalan / Bergerak</h1>
<p>Mau belajar membuat tulisan bergerak?...<br/>
Itu mudah, berikut contohnya
</p>
<marquee>Contoh tulisan berjalan</marquee>
<p>Itu adalah contoh paling sederhana :-)</p>
</body>
</html>

Keterangan :

Silakan ganti teks Contoh tulisan berjalan dengan teks yang anda inginkan.

Hasil

Contoh 2 : Gambar berjalan

<marquee><img src="1.png"></marquee>

Keterangan :

Silakan ganti <img src="1.png"> dengan gambar yang anda mau. Dan jika ingin memasang beberapa gambar silakan sisipkan secara berurutan, contohnya seperti ini :

<marquee><img src="1.png"> <img src="2.png"> <img src="3.png"></marquee>

Hasil

Nah, itulah kode paling sederhana yang harus ditulis kalau ingin membuat tulisan bergerak menggunakan html. Dengan sedikit kode html itu kita sudah dapat membuat teks / gambar berjalan dari kanan ke kiri.

Bagaimana cara membuat teks / gambar bergerak dari kiri ke kanan? …

Nah … kalau ingin membuatnya berjalan dari kiri ke kanan, atas ke bawah atau sebaliknya. Maka kita perlu memberikan atribut tambahan pada tag pembuka (<marquee>).

Untuk melihat atribut – atribut yang valid html5 silakan buka halaman Belajar HTML Dasar Untuk Pemula.

Atribut yang dapat digunakan pada tag <marquee>

Ada beberapa atribut tambahan yang dapat kita gunakan untuk mengatur teks berjalan, yaitu :

width dan height

direction

behavior

scrolldelay

scrollamount

bgcolor

loop

hspace

vspace

style

Oke, mari kita kenali satu persatu serta bagaimana menggunakannya.

Menentukan lebar serta tinggi teks berjalan

Salah satu cara untuk mengatur lebar maupun tinggi sebuah area adalah menggunakan atribut width dan height.

Dengannya kita menentukan lebar serta tinggi sebuah area dengan nilai berupa angka dalam pixel (px) atau persen (%).

Khusus teks berjalan dari kiri ke kanan atau sebaliknya, sebaiknya tidak menggunakan atribut height. Karena lebih cocok digunakan untuk tulisan berjalan dari atas ke bawah atau sebaliknya.

Misalnya kita ingin area <marquee> selebar 400px, maka kita dapat menulisnya seperti ini width="400px". Atau jika ingin lebarnya setengah dari area yang ditempatinya, maka kita dapat mengisi nilai dengan 50% dan ditulis begini width="50%".

Apabila sebuah area (anggap saja <marquee>) tidak menggunakan atribut ini, maka lebarnya secara default 100% dan tinggi menyesuaikan konten yang ada di dalamnya.

Bagaimana cara menambahkan atribut ?…

Untuk menambahkan atribut tertentu, maka kita harus menyisipkan atribut pada tag pembuka, pada kasus ini <marquee>.

Untuk lebih jelasnya silakan perhatikan perbedaan contoh berikut :

Misal tanpa atribut

<marquee>Contoh tulisan berjalan</marquee>

Misal menggunakan atribut width dalam pixel

<marquee width="400px">Contoh tulisan berjalan</marquee>

Misal menggunakan atribut width dalam persen

<marquee width="50%">Contoh tulisan berjalan</marquee>

Misal menggunakan atribut width dan height

<marquee width="400px" height="50px">Contoh tulisan berjalan</marquee>

Hasilnya

Menentukan arah gerak tulisan berjalan

Untuk menentukan arah pergerakan teks berjalan seperti dari kiri ke kanan, atas ke bawah, dan bawah ke atas. Maka kita memerlukan bantuan atribut direction.

Atribut ini menggunakan nilai :

left → untuk membuat tulisan berjalan dari kanan ke kiri. Di tulis seperti ini direction="left". Khusus yang satu ini digunakan atau tidak sama saja, karena secara default tag <marquee> akan membuat tulisan bergerak dari kanan ke kiri.
right → untuk membuat tulisan berjalan dari kiri ke kanan. Di tulis seperti ini direction="right".
up → untuk membuat tulisan bergerak dari bawah ke atas. Di tulis seperti ini direction="up".
down → untuk membuat tulisan bergerak dari atas ke bawah. Di tulis seperti ini direction="down".

Contoh menggunakan direction=”left”

<marquee direction="left">Contoh tulisan berjalan ke kiri</marquee>

Contoh menggunakan atribut direction=”right”

<marquee direction="right">Contoh tulisan berjalan ke kanan</marquee>

Contoh menggunakan atribut direction=”up”

<marquee direction="up" height="100px">Contoh tulisan bergerak naik</marquee>

Contoh menggunakan atribut direction=”down”

<marquee direction="down" height="100px">Contoh tulisan begerak turun</marquee>

Penampakan

Menentukan tipe gerakan konten

Kita dapat menentukan tipe gerakan dengan atribut behavior yang nantinya dapat di isi dengan nilai :

scroll → (default) di tulis atau tidak ditulis sama saja. Konten akan bergerak dari sebuah sisi (awal) sampai sisi berlawanan (akhir) seperti dari kanan ke kiri. Kemudian akan keluar dan bergerak lagi dari sisi awal.
slide → Konten akan bergerak dari sebuah sisi (awal) dan akan berhenti di sisi akhir.
alternate → Konten akan bergerak dari sebuah sisi (awal), setelah sampai sisi akhir maka dia akan kembali ke sisi awal. Atau bahasa kerennya teks memantul :-).

Contoh :

<p><marquee behavior="scroll">atribut behavior scroll</marquee></p>
<p><marquee behavior="slide">atribut behavior slide</marquee></p>
<p><marquee behavior="alternate">atribut behavior slide</marquee></p>

Hasil

Mempercepat dan memperlambat pergerakan konten

Ada 2 atribut yang dapat digunakan untuk mempercepat maupun memperlambat gerakan konten, yaitu :

scrolldelay : Nilai default adalah 85.
- Jika nilai yang kita gunakan lebih kecil dari 85, maka pergerakan akan semakin cepat.
- Dan kalau nilai yang digunakan lebih besar dari 85, maka gerakan akan semakin lambat.
scrollamount : Nilai default adalah 6.
- Untuk memperlambat pergerakan maka kita harus menggunakan nilai yang lebih kecil dari 6, yaitu 5 – 1.
- Untuk mempercepat pergerakan maka kita harus menggunakan nilai yang lebih besar dari 6, yaitu 7 dan seterusnya.

Contoh menggunakan scrolldelay

<p><marquee scrolldelay="50">scrolldelay="50"</marquee></p>
<p><marquee scrolldelay="75">scrolldelay="75"</marquee></p>
<p><marquee>Default / scrolldelay="85""</marquee></p>
<p><marquee scrolldelay="100">scrolldelay="100"</marquee></p>
<p><marquee scrolldelay="150">scrolldelay="150"</marquee></p>

Penampakan

Contoh menggunakan scrollamount

<p><marquee scrollamount="4">scrollamount="4"</marquee></p>
<p><marquee scrollamount="5">scrollamount="5"</marquee></p>
<p><marquee>Default / scrollamount="6"</marquee></p>
<p><marquee scrollamount="8">scrollamount="8"</marquee></p>
<p><marquee scrollamount="10">scrollamount="10"</marquee></p>
<p><marquee scrollamount="15">scrollamount="15"</marquee></p>

Hasil

Menentukan pengulangan gerak

Kita dapat mengatur berapa kali gambar / tulisan bergerak (lewat) menggunakan atribut loop. Dan nilai default loop adalah tidak terbatas.

Misalnya kita ingin konten bergerak sebanyak 3x saja dan setelah itu menghilang. Maka kita dapat mengisi nilai loop dengan angka 3 seperti ini loop="3". Dan jika ingin 5x maka silakan isi nilai dengan angka 5, dan seterusnya.

Tapi kalau kita menginginkan konten bergerak kemudian berhenti (tidak menghilang). Maka kita memerlukan atribut tambahan, behavior="slide".

Contoh

<p><marquee>Tanpa atribut loop</marquee></p>
<p><marquee loop="2">Menggunakan atribut loop="2"</marquee></p>
<p><marquee loop="3" behavior="slide">Menggunakan atribut loop="3" + behavior="slide"</marquee></p>

Penampakannya

Memberi warna latar pada teks berjalan

Ada 2 atribut yang dapat digunakan untuk memberi warna latar / background, yaitu :

bgcolor : cara penulisannya `bgcolor="kode warna"`.

style : cara penulisannya `style="background:kode warna"`.

Untuk memberi warna latar baik menggunakan atribut bgcolor maupun style, kita harus mengetahui kode warna. Untuk itu silakan temukan kode warna yang anda mau di halaman kode warna html / css.

Contoh dan penampakannya ada di bagian memberi jarak area berikut.

Memberi jarak area marquee

Kita dapat memberi jarak (ruang kosong) pada gambar / teks berjalan menggunakan 3 atribut berikut :

hspace : untuk menentukan jarak pada kiri dan kanan area marquee.
vspace : untuk menentukan jarak pada atas dan bawah area marquee.
style : dapat digunakan untuk memberi jarak sebelah kanan, kiri, atas, dan bawah sebuah area menggunakan margin.

Untuk lebih jelas dan bagaimana cara penulisannya silakan perhatikan contoh berikut :

<p><marquee bgcolor="#FFCC99">Tanpa atribut v / hspace</marquee></p>
<p><marquee hspace="15" bgcolor="#66CCFF">atribut hspace="15"</marquee></p>
<p><marquee hspace="40" bgcolor="#99FFCC">atribut hspace="40"</marquee></p>
<p><marquee vspace="15" bgcolor="#99FF00">atribut vspace="15"</marquee></p>
<p><marquee bgcolor="#FFCC99">Tanpa atribut</marquee></p>
<p><marquee vspace="20" bgcolor="#FF66CC">atribut vspace="20"</marquee></p>
<p><marquee bgcolor="#FFCC99">Tanpa atribut</marquee></p>
<p><marquee bgcolor="#9999FF" style="margin:15px 0 0 15px">Pakai atribut style</marquee></p>
<p><marquee bgcolor="#FFCC99">Tanpa atribut</marquee></p>

Hasilnya seperti ini

Nah itulah cara mudah membuat tulisan berjalan di blog maupun website, yaitu dengan menggunakan html.

Namun, jika anda ingin bikin teks berjalan valid di html5, maka silakan gunakan css3 atau script.

Cara Membuat Tulisan Berjalan Menggunakan CSS3 Animation

Agar tulisan berjalan yang kita buat valid html5, maka kita harus membuatnya menggunakan css atau script.

Kita dapat membuat teks berjalan menggunakan css3 animation `@keyframes`.

Bagaimana caranya ?…

Mudah kok. Kita cukup menambahkan kode css yang membuat tulisan berjalan. Kemudian menulis teks berjalan tersebut dalam elemen `<div>` dan `<p>` dengan class tertentu yang sesuai dengan css yang ditambahkan tadi.

Berikut kode css yang harus anda tambahkan serta cara penulisan teks berjalan di html.

Bergerak dari kanan ke kiri

Kode CSS

.scroll-left {
height: 50px;
overflow: hidden;
position: relative;
}
.scroll-left p {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: scroll-left 15s linear infinite;
-webkit-animation: scroll-left 15s linear infinite;
animation: scroll-left 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
0%   { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
0%   { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
0%   {
-moz-transform: translateX(100%); /* Browser bug fix */
-webkit-transform: translateX(100%); /* Browser bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Browser bug fix */
-webkit-transform: translateX(-100%); /* Browser bug fix */
transform: translateX(-100%);
}
}

Penulisan di HTML

<div class="scroll-left">
<p>Tulis teks berjalan yang anda mau di sini</p>
</div>

Bergerak dari kiri ke kanan

Kode CSS

.scroll-right {
height: 50px;
overflow: hidden;
position: relative;
}
.scroll-right p {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform:translateX(-100%);
-webkit-transform:translateX(-100%);
transform:translateX(-100%);
/* Apply animation to this element */
-moz-animation: scroll-right 15s linear infinite;
-webkit-animation: scroll-right 15s linear infinite;
animation: scroll-right 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-right {
0%   { -moz-transform: translateX(-100%); }
100% { -moz-transform: translateX(100%); }
}
@-webkit-keyframes scroll-right {
0%   { -webkit-transform: translateX(-100%); }
100% { -webkit-transform: translateX(100%); }
}
@keyframes scroll-right {
0%   {
-moz-transform: translateX(-100%); /* Browser bug fix */
-webkit-transform: translateX(-100%); /* Browser bug fix */
transform: translateX(-100%);
}
100% {
-moz-transform: translateX(100%); /* Browser bug fix */
-webkit-transform: translateX(100%); /* Browser bug fix */
transform: translateX(100%);
}
}

Penulisan di HTML

<div class="scroll-right">
<p>Tulis teks berjalan yang anda mau di sini</p>
</div>

Bergerak dari bawah ke atas

Kode CSS

.scroll-up {
height: 50px;
overflow: hidden;
position: relative;
}
.scroll-up p {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform:translateY(100%);
-webkit-transform:translateY(100%);
transform:translateY(100%);
/* Apply animation to this element */
-moz-animation: scroll-up 5s linear infinite;
-webkit-animation: scroll-up 5s linear infinite;
animation: scroll-up 5s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-up {
0%   { -moz-transform: translateY(100%); }
100% { -moz-transform: translateY(-100%); }
}
@-webkit-keyframes scroll-up {
0%   { -webkit-transform: translateY(100%); }
100% { -webkit-transform: translateY(-100%); }
}
@keyframes scroll-up {
0%   {
-moz-transform: translateY(100%); /* Browser bug fix */
-webkit-transform: translateY(100%); /* Browser bug fix */
transform: translateY(100%);
}
100% {
-moz-transform: translateY(-100%); /* Browser bug fix */
-webkit-transform: translateY(-100%); /* Browser bug fix */
transform: translateY(-100%);
}
}

Penulisan di HTML

<div class="scroll-up">
<p>Tulis teks berjalan yang anda mau di sini</p>
</div>

Bergerak dari atas ke bawah

Kode CSS

.scroll-down {
height: 50px;
overflow: hidden;
position: relative;
}
.scroll-down p {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform:translateY(-100%);
-webkit-transform:translateY(-100%);
transform:translateY(-100%);
/* Apply animation to this element */
-moz-animation: scroll-down 5s linear infinite;
-webkit-animation: scroll-down 5s linear infinite;
animation: scroll-down 5s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-down {
0%   { -moz-transform: translateY(-100%); }
100% { -moz-transform: translateY(100%); }
}
@-webkit-keyframes scroll-down {
0%   { -webkit-transform: translateY(-100%); }
100% { -webkit-transform: translateY(100%); }
}
@keyframes scroll-down {
0%   {
-moz-transform: translateY(-100%); /* Browser bug fix */
-webkit-transform: translateY(-100%); /* Browser bug fix */
transform: translateY(-100%);
}
100% {
-moz-transform: translateY(100%); /* Browser bug fix */
-webkit-transform: translateY(100%); /* Browser bug fix */
transform: translateY(100%);
}
}

Penulisan di HTML

<div class="scroll-down">
<p>Tulis teks berjalan yang anda mau di sini</p>
</div>

Untuk melihat hasilnya silakan klik di sini.

Script Teks Berjalan Alternatif Marquee

Di sini saya akan menuliskan salah satu script yang dapat digunakan untuk menampilkan tulisan bergerak. Selain script ini masih ada script lainnya kok, silakan cari di Google :-).

Adapun langkah pertama yang harus dilakukan adalah memasang script berikut sebelum </head> atau </body>

<script type="text/javascript">
(function () {
function start_marquee() {
function go() {
i = i < width ? i + step : 1;
m.style.marginLeft = -i + 'px';
}
var i = 0,
step = 3,
space = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
var m = document.getElementById('marquee');
var t = m.innerHTML; //text
m.innerHTML = t + space;
m.style.position = 'absolute'; // http://stackoverflow.com/questions/2057682/determine-pixel-length-of-string-in-javascript-jquery/2057789#2057789
var width = (m.clientWidth + 1);
m.style.position = '';
m.innerHTML = t + space + t + space + t + space + t + space + t + space + t + space + t + space;
if (m.addEventListener) {
m.addEventListener('mouseenter', function () {
step = 0;
}, false);
m.addEventListener('mouseleave', function () {
step = 3;
}, false);
}
var x = setInterval(go, 50);
}

if (window.addEventListener) {
window.addEventListener('load', start_marquee, false);
} else if (window.attachEvent) { //IE7-8
window.attachEvent('onload', start_marquee);
}
})();
</script>

Kemudian tambahkan kode css berikut pada style template yang anda gunakan :

#marquee {
overflow: hidden;
white-space: nowrap;
}

Setelah script dan css tersebut sudah terpasang dengan benar. Baru kita tulis teks berjalan di dalam area div dengan id marquee, seperti ini :

<div id="marquee">Tulis teks berjalan di sini</div>

Demo sudah ada di atas bagian css tadi 🙂

phpcoding

Membuat Text Berjalan dengan CSS

Cara Membuat Tulisan Berjalan Dengan HTML Marquee

Atribut yang dapat digunakan pada tag <marquee>

Ada beberapa atribut tambahan yang dapat kita gunakan untuk mengatur teks berjalan, yaitu :

width dan height

direction

behavior

scrolldelay

scrollamount

bgcolor

loop

hspace

vspace

style

Oke, mari kita kenali satu persatu serta bagaimana menggunakannya.

Menentukan lebar serta tinggi teks berjalan

Menentukan arah gerak tulisan berjalan

Menentukan tipe gerakan konten

Mempercepat dan memperlambat pergerakan konten

Menentukan pengulangan gerak

Memberi warna latar pada teks berjalan

Memberi jarak area marquee

Cara Membuat Tulisan Berjalan Menggunakan CSS3 Animation

Bergerak dari kanan ke kiri

Bergerak dari kiri ke kanan

Bergerak dari bawah ke atas

Bergerak dari atas ke bawah

Script Teks Berjalan Alternatif Marquee

0 komentar:

Labels

Popular Posts

Tags 1

Tags 2

Tags 3

Tags 4

phpcoding

Membuat Text Berjalan dengan CSS

Cara Membuat Tulisan Berjalan Dengan HTML Marquee

Atribut yang dapat digunakan pada tag <marquee>

Ada beberapa atribut tambahan yang dapat kita gunakan untuk mengatur teks berjalan, yaitu : width dan height direction behavior scrolldelay scrollamount bgcolor loop hspace vspace style Oke, mari kita kenali satu persatu serta bagaimana menggunakannya.

Menentukan lebar serta tinggi teks berjalan

Menentukan arah gerak tulisan berjalan

Menentukan tipe gerakan konten

Mempercepat dan memperlambat pergerakan konten

Menentukan pengulangan gerak

Memberi warna latar pada teks berjalan

Memberi jarak area marquee

Cara Membuat Tulisan Berjalan Menggunakan CSS3 Animation

Bergerak dari kanan ke kiri

Bergerak dari kiri ke kanan

Bergerak dari bawah ke atas

Bergerak dari atas ke bawah

Script Teks Berjalan Alternatif Marquee

0 komentar:

Labels

Popular Posts

Tags 1

Tags 2

Tags 3

Tags 4

Ada beberapa atribut tambahan yang dapat kita gunakan untuk mengatur teks berjalan, yaitu :

width dan height

direction

behavior

scrolldelay

scrollamount

bgcolor

loop

hspace

vspace

style

Oke, mari kita kenali satu persatu serta bagaimana menggunakannya.