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.
<marquee>
yang dapat digunakan untuk membuat teks maupun gambar berjalan. Yang secara default teks / gambar tersebut akan berjalan dari kanan ke kiri.<marquee>
(tag pembuka)Isi
(bisa berupa teks / gambar) yang ingin dibuat berjalan.</marquee>
(tag penutup)<marquee>Isi</marquee>
<marquee>Contoh tulisan berjalan</marquee>
<!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>

<marquee><img src="1.png"></marquee>
<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>

<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
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
<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%"
.<marquee>
) tidak menggunakan atribut ini, maka lebarnya secara default 100% dan tinggi menyesuaikan konten yang ada di dalamnya.<marquee>
.<marquee>Contoh tulisan berjalan</marquee>
<marquee width="400px">Contoh tulisan berjalan</marquee>
<marquee width="50%">Contoh tulisan berjalan</marquee>
<marquee width="400px" height="50px">Contoh tulisan berjalan</marquee>

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
direction="left"
. Khusus yang satu ini digunakan atau tidak sama saja, karena secara default tag <marquee>
akan membuat tulisan bergerak dari kanan ke kiri.direction="right"
.direction="up"
.direction="down"
.<marquee direction="left">Contoh tulisan berjalan ke kiri</marquee>
<marquee direction="right">Contoh tulisan berjalan ke kanan</marquee>
<marquee direction="up" height="100px">Contoh tulisan bergerak naik</marquee>
<marquee direction="down" height="100px">Contoh tulisan begerak turun</marquee>

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
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 :-).<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>

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
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.
<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>

<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>

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
loop="3"
. Dan jika ingin 5x maka silakan isi nilai dengan angka 5, dan seterusnya.behavior="slide"
.<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>

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.
bgcolor="kode warna"
.style="background:kode warna"
.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.
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.<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>

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.
@keyframes
.<div>
dan <p>
dengan class tertentu yang sesuai dengan css yang ditambahkan tadi.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>
.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%); } }
<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>
.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%); } }
<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>
.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%); } }
<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.
.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%); } }
<div class="scroll-down"> <p>Tulis teks berjalan yang anda mau di sini</p> </div>
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 = ' ';
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 🙂
</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 = ' '; 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>
#marquee { overflow: hidden; white-space: nowrap; }
<div id="marquee">Tulis teks berjalan di sini</div>
0 komentar: