MARQUEE di Era HTML5 dan CSS3

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.

Sebagian alasannya tidak pernah sepenuhnya diterapkan oleh browser, selain dari pendapat pribadi yang kuat, adalah bahwa itu dianggap sebagai efek visual dan dengan demikian, itu 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, arah-marquee dan kecepatan marquee.

gaya overflowItu gaya overflow properti (yang saya bahas dalam artikel CSS Overflow) mendefinisikan gaya yang disukai untuk konten yang meluap kotak konten. Jika Anda mengatur nilainya marquee-line atau marquee-block konten Anda akan meluncur masuk dan keluar ke kiri / kanan (marquee-line) atau naik / turun (marquee-block).

gaya marqueeProperti ini menentukan bagaimana konten akan masuk tampilan (dan keluar).

Pilihannya adalah gulir, meluncur dan bergantian. 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-countSalah satu kelemahan menggunakan MARQUEE elemen adalah bahwa marquee tidak pernah berhenti. Namun dengan gaya properti marquee-play-count Anda dapat mengatur marquee untuk memutar konten dan mematikannya untuk beberapa kali tertentu.

arah-marqueeAnda juga dapat memilih arah yang harus digulirkan oleh konten di layar. Nilai meneruskan dan membalikkan didasarkan pada directionality teks ketika gaya overflow aku s marquee-line dan naik atau turun saat gaya overflow aku s marquee-block.

Detail Arah-Marquee

gaya overflow	Arah Bahasa	meneruskan	membalikkan
marquee-line	ltr	kiri	kanan
	rtl	kanan	kiri
marquee-block		naik	turun

kecepatan marqueeProperti ini menentukan seberapa cepat konten bergulir di layar. Nilai-nilai itu lambat, normal, dan cepat. Kecepatan sebenarnya tergantung pada konten dan browser yang menampilkannya, tetapi nilainya harus lambat lebih lambat dari normal yang lebih lambat dari 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;}