Sing sampeyan sing wis nulis HTML suwene bisa uga ngeling-eling unsur kasebut. Iki minangka unsur khusus browser sing nggawe spanduk teks nggulung ing layar. Unsur iki ora tau ditambahake karo spesifikasi HTML lan dhukungan kanggo iku beda-beda ing kabeh browser. Wong asring banget panemu babagan nggunakake unsur iki - loro positif lan negatif. Nanging manawa sampeyan tresna utawa disengiti, sampeyan nyedhiyakake tujuan nggawe konten sing ngluwihi wates kothak sing katon.
Aspèk kasebut ora tau diakibatake kanthi gampang dening browser, kajaba saka pendapat pribadi sing kuat, yaiku sing dianggep minangka efek visual lan minangka, ora mesthine ditetepake dening HTML, sing nemtokake struktur kasebut. Nanging, efek visual utawa presentation kudu dikelola dening CSS. Lan CSS3 nambah modul marquee kanggo ngontrol carane browser nambah efek marquee menyang unsur.
Properti CSS3 Anyar
CSS3 nambahake limang sifat anyar kanggo ngontrol carane nampilake isi ing tlatah: gaya overflow, gaya tampil marquee-play-count, marquee-direction lan speed-marquee.
gaya overflow
Properti gaya overflow (sing uga saya rembugan ing artikel CSS Overflow) nemtokake gaya sing disenengi kanggo isi sing melu kothak isi. Yen sampeyan ngeset nilai kanggo baris-baris utawa pemblokiran marquee isi sampeyan bakal geser ing lan metu ngiwa / nengen (marquee-line) utawa munggah / mudhun (marquee-block).
gaya tuwa
Properti kasebut nemtokake cara isi kasebut bakal pindhah menyang tampilan (lan metu).
Pilihan iku gulung, geser, lan liya-liyane. Gulung diwiwiti karo layar rampung, banjur pindhah menyang wilayah sing katon nganti kabeh layar mati maneh. Geser diwiwiti kanthi layar rampung rampung lan banjur dipindhah nganti isi kasebut wis dipindhah kanthi cepet menyang layar lan ora ana konten liyane sing bakal ditinggalake kanggo geser ing layar.
Pamungkas, sulih nggulung isi saka sisi menyang sisih, ngusap bali lan maju.
marquee-play-count
Salah sijine kelemahane nggunakake unsur MARQUEE yaiku ora bisa mandheg. Nanging kanthi properti gaya marquee-play-count sampeyan bisa nyetel marquee kanggo muter isi lan mateni sawetara kanggo nomer tartamtu.
marquee-direction
Sampeyan uga bisa milih arah sing isi kudu nggulung ing layar. Nilai-nilai ke depan dan terbalik didasarkan pada directionality teks ketika gaya overflow adalah marquee-line dan up or down ketika gaya overflow adalah blok besar.
Rincian Marquee-Direction
| gaya overflow | Basa Arah | maju | mbalikke |
|---|---|---|---|
| marquee-line | ltr | kiwa | tengen |
| rtl | tengen | kiwa | |
| marquee-block | munggah | mudhun |
marquee-speed
Iki nemtokake cara cepet isi gulungan ing layar. Nilai kasebut alon, normal, lan cepet. Kacepetan nyata gumantung marang isi lan browser sing nampilake, nanging angka kudu lambat luwih alon tinimbang normal sing luwih alon tinimbang cepet.
Dukungan Browser Properti Marquee
Sampeyan bisa uga nggunakake prefixes vendor kanggo njaluk unsur-unsur CSS tampilake. Padha kaya mangkene:
| CSS3 | Panyedhiya Vendor |
|---|---|
| overflow-x: marquee-line; | overflow-x: -webkit-marquee; |
| gaya tuwa | -webkit-marquee-style |
| marquee-play-count | -webkit-marquee-repetition |
| marquee-direction: maju | malik; | -webkit-marquee-direction: maju | mundur | |
| marquee-speed | -webkit-marquee-speed |
| ora padha | -webkit-marquee-increment |
Properti pungkasan ngidini sampeyan nemtokake cara gedhe utawa cilik langkah-langkah kasebut minangka konten nggulung ing layar ing tugu.
Supaya sampeyan bisa kerja, sampeyan kudu nyelehake nilai prefixed vendor dhisik banjur tindakake karo nilai-nilai spesifikasi CSS3. Contone, ing kene ana CSS kanggo tlatah sing nggulung teks limang kali saka kiwa menyang tengen ing jero kotak 200x50.
{
ambane: 200px; dhuwur: 50px; putih-spasi: saiki;
overflow: hidden;
overflow-x: -webkit-marquee;
-webkit-marquee-direction: maju;
-webkit-marquee-style: scroll;
-webkit-marquee-speed: normal;
-webkit-marquee-increment: small;
-webkit-marquee-repetition: 5;
overflow-x: marquee-line;
marquee-direction: maju;
gaya tiron: gulung;
marquee-speed: normal;
marquee-play-count: 5;
}