Paghimog Scrollable Content sa HTML5 ug CSS3 nga walay MARQUEE

Kadtong kaninyo nga nagsulat sa HTML sulod sa taas nga panahon mahimo nga mahinumdom sa elemento. Kini usa ka elemento nga partikular sa browser nga naglalang sa usa ka bandila sa teksto sa pag-scroll sa tibuok screen. Kini nga elemento wala gayud idugang sa espesipikasyon sa HTML ug suporta alang niini nagkalainlain sa mga browser. Ang mga tawo sa kasagaran adunay lig-on kaayo nga mga opinyon mahitungod sa paggamit niini nga elemento - positibo ug negatibo. Apan bisan kon ikaw nahigugma o nagdumot niini, kini nagsilbi sa katuyoan sa paghimo sa sulod nga nakapaawas sa kahon nga makita sa mga utlanan.

Ang bahin sa rason nga wala gayud kini bug-os nga gipatuman sa mga browsers, gawas sa lig-on nga personal nga opinyon, nga kini giisip nga usa ka biswal nga epekto ug sa ingon, kini dili kinahanglan nga ipasabut sa HTML, nga naghubit sa istruktura. Hinuon, ang mga epekto sa visual o presentasyon kinahanglan gidumala sa CSS. Ug ang CSS3 nagdugang sa marquee module aron makontrol kung giunsa sa mga browsers ang pagdugang sa epekto sa marquee ngadto sa mga elemento.

Bag-ong CSS3 Properties

Ang CSS3 nagdugang sa lima ka mga bag-ong kabtangan aron makatabang sa pagpugong unsaon pagpakita ang imong sulod sa marquee: estilo nga overflow, marquee-style, marquee-play-count, direksyon sa marquee ug speed-marque.

estilo sa overflow
Ang overflow-style nga kabtangan (nga gihisgutan usab nako sa artikulo nga CSS Overflow) naghubit sa gipalabi nga estilo sa mga sulod nga nag-awas sa kahon sa sulod. Kon imong ibutang ang bili sa marquee-line o marquee-block sa imong sulod ang mag-slide sulod ug mogawas sa wala / tuo (marquee-line) o up / down (marquee-block).

style-marquee
Kini nga kabtangan naghubit kon unsaon paglantaw sa sulod (ug sa gawas).

Ang mga kapilian mao ang scroll, slide ug alternate. Ang linukot magsugod uban sa sulod sa hingpit sa screen, ug unya kini mag-agi tabok sa makita nga lugar hangtud nga kini ang tanan nga hingpit nga off screen pag-usab. Ang slide magsugod uban sa sulod sa hingpit nga screen ug dayon kini magpadayon hangtud nga ang sulod hingpit nga gibalhin ngadto sa screen ug wala nay labaw pa nga sulod nga nahibilin sa slide sa screen.

Sa kataposan, ang mga alternatibo mopagawas sa sulod gikan sa kilid ngadto sa kilid, nga mag-agi balik-balik.

marquee-play-count
Usa sa mga kahuyang sa paggamit sa elemento sa MARQUEE mao nga ang marquee dili mohunong. Apan uban sa estilo nga kabtangan nga marquee-play-count mahimo ka nga magtakda sa marquee aron i-rotate ang sulod ug sa sulod alang sa usa ka piho nga gidaghanon sa mga panahon.

direksyon sa marquee
Makapili ka usab sa direksyon nga ang sulod kinahanglan nga mag-scroll sa screen. Ang mga mithi sa unahan ug baliskad gibase sa direksyon sa teksto sa diha nga ang overflow-style mao ang marquee-line ug pataas o paubos sa dihang ang overflow-style mao ang marquee-block.

Mga detalye sa Marquee-Direction

estilo sa overflow Direksyon sa Pinulongan sa unahan balihon
marquee-line ltr sa wala husto
rtl husto sa wala
pag-marquee-block up paubos

speed-marquee
Kini nga kabtangan nagtino kon unsa ka dali ang sulod nga mga linukot sa screen. Ang mga bili mahinay, normal, ug paspas. Ang aktwal nga katulin depende sa sulod ug sa browser nga nagpakita niini, apan ang mga bili kinahanglan nga hinay hinay kaysa sa normal nga mas hinay kay sa pagpuasa.

Browser Support sa Marquee Properties

Mahimo nimo nga gamiton ang prefix sa vendor aron makuha ang mga elemento sa CSS marquee aron magtrabaho. Sila mao ang mosunod:

CSS3 Vendor Prefix
overflow-x: marquee-line; overflow-x: -webkit-marquee;
style-marquee -webkit-marquee-style
marquee-play-count -webkit-marquee-pagbalik-balik
direksiyon sa marquee: pasulong | balik; -webkit-marquee-direksyon: nag-una | paatras;
speed-marquee -webkit-marquee-speed
walay katumbas -webkit-marquee-increment

Ang katapusan nga kabtangan nagtugot kanimo sa paghubit kon unsa ka dako o gamay ang mga lakang nga kinahanglan ingon nga ang mga linukot sa sulod sa screen sa marquee.

Aron nga magtrabaho ka sa imong marquee, kinahanglan nga ibutang una ang mga prefixed values ​​sa vendor ug dayon sundan kini sa CSS3 specification values. Pananglitan, kini ang CSS alang sa usa ka marquee nga nag-scroll sa teksto lima ka beses gikan sa wala ngadto sa tuo sulod sa usa ka 200x50 nga kahon.

Ang
lapad: 200px; gitas-on: 50px; puti nga luna: karon;
pag-awas: gitago;
overflow-x: -webkit-marquee;
-webkit-marquee-direksyon: pasulong;
-webkit-marquee-style: scroll;
-webkit-marquee-speed: normal;
-webkit-marquee-increment: gamay;
-webkit-marquee-pagbalik-balik: 5;
overflow-x: marquee-line;
direksyon sa marquee: sa unahan;
Marquee-style: scroll;
pagpadagan sa marquee: normal;
Marquee-play-count: 5;
}