Bagi Anda yang telah menulis HTML untuk waktu yang lama mungkin ingat elemennya. Ini adalah elemen khusus peramban yang membuat spanduk teks bergulir di seluruh layar. Elemen ini tidak pernah ditambahkan ke spesifikasi HTML dan dukungan untuk itu sangat bervariasi di semua browser. Orang sering memiliki pendapat yang sangat kuat tentang penggunaan elemen ini - baik positif maupun negatif. Tetapi apakah Anda menyukai atau membencinya, itu melayani tujuan membuat konten yang meluap batas kotak terlihat.
Bagian dari alasan itu tidak pernah sepenuhnya dilaksanakan oleh browser, selain dari pendapat pribadi yang kuat, adalah bahwa itu dianggap sebagai efek visual dan dengan demikian, tidak boleh didefinisikan oleh HTML, yang mendefinisikan struktur. Sebaliknya, efek visual atau presentasi harus dikelola oleh CSS. Dan CSS3 menambahkan modul marquee untuk mengontrol bagaimana browser menambahkan efek marquee ke elemen.
Properti CSS3 Baru
CSS3 menambahkan lima properti baru untuk membantu mengontrol bagaimana konten Anda ditampilkan di marquee: gaya overflow, gaya marquee, marquee-play-count, arahan marquee, dan kecepatan marquee.
gaya overflow
Properti overflow-style (yang saya bahas di artikel CSS Overflow) mendefinisikan gaya yang disukai untuk konten yang meluap-luap kotak konten. Jika Anda menetapkan nilai ke marquee-line atau marquee-blok konten Anda akan meluncur masuk dan keluar ke kiri / kanan (marquee-line) atau atas / bawah (marquee-block).
gaya marquee
Properti ini menentukan bagaimana konten akan masuk tampilan (dan keluar).
Pilihannya adalah gulir, slide, dan alternatif. Gulir dimulai dengan konten sepenuhnya dari layar, dan kemudian bergerak melintasi area yang terlihat sampai semuanya benar-benar mati layar lagi. Slide dimulai dengan konten sepenuhnya dari layar dan kemudian bergerak melintasi sampai konten sepenuhnya pindah ke layar dan tidak ada lagi konten yang tersisa untuk meluncur di layar.
Terakhir, alternatif memantul konten dari sisi ke sisi, meluncur maju mundur.
marquee-play-count
Salah satu kelemahan menggunakan elemen MARQUEE adalah bahwa marquee tidak pernah berhenti. Tetapi dengan properti gaya marquee-play-count Anda dapat mengatur marquee untuk memutar konten dan mematikan untuk sejumlah kali tertentu.
arah-marquee
Anda juga dapat memilih arah yang harus digulirkan oleh konten di layar. Nilai maju dan mundur didasarkan pada directionality teks ketika overflow-style adalah marquee-line dan naik atau turun ketika overflow-style adalah marquee-block.
Detail Arah-Marquee
| gaya overflow | Arah Bahasa | meneruskan | membalikkan |
|---|---|---|---|
| marquee-line | ltr | kiri | kanan |
| rtl | kanan | kiri | |
| marquee-block | naik | turun |
kecepatan marquee
Properti ini menentukan seberapa cepat konten bergulir di layar. Nilai-nilainya lambat, normal, dan cepat. Kecepatan sebenarnya tergantung pada konten dan browser yang menampilkannya, tetapi nilainya harus lambat lebih lambat dari biasanya yang lebih lambat daripada cepat.
Dukungan Browser untuk Properti Marquee
Anda mungkin perlu menggunakan awalan vendor agar elemen CSS marquee berfungsi. Mereka adalah sebagai berikut:
| CSS3 | Awalan Vendor |
|---|---|
| overflow-x: marquee-line; | overflow-x: -webkit-marquee; |
| gaya marquee | -webkit-marquee-style |
| marquee-play-count | -webkit-marquee-repetition |
| marquee-direction: maju | mundur; | -webkit-marquee-direction: maju | mundur; |
| kecepatan marquee | -webkit-marquee-speed |
| tidak ada yang setara | -webkit-marquee-increment |
Properti terakhir memungkinkan Anda untuk menentukan seberapa besar atau kecil langkah-langkah yang harus dilakukan ketika konten bergulir pada layar di marquee.
Agar marquee Anda berfungsi, Anda harus menempatkan terlebih dahulu nilai awal vendor dan kemudian mengikutinya dengan nilai spesifikasi CSS3. Sebagai contoh, di sini adalah CSS untuk marquee yang menggulung teks lima kali dari kiri ke kanan di dalam kotak 200x50.
{
lebar: 200px; tinggi: 50px; ruang putih: nowrap;
overflow: tersembunyi;
overflow-x: -webkit-marquee;
-webkit-marquee-direction: meneruskan;
-webkit-marquee-style: gulir;
-webkit-marquee-speed: normal;
-webkit-marquee-increment: kecil;
-webkit-marquee-repetition: 5;
overflow-x: marquee-line;
marquee-direction: maju;
gaya marquee: gulir;
kecepatan marquee: normal;
marquee-play-count: 5;
}