Krijimi i përmbajtjes së shkëmbyeshme në HTML5 dhe CSS3 Pa MARQUEE

Ata prej jush që kanë shkruar HTML për një kohë të gjatë mund të kujtojnë elementin. Ky ishte një element i veçantë i shfletuesit që krijoi një flamur të shkrimit në të gjithë ekranin. Ky element nuk u shtua kurrë në specifikimin e HTML dhe mbështetja për të ndryshonte gjerësisht nëpër shfletues. Njerëzit shpesh kishin mendime shumë të forta rreth përdorimit të këtij elementi - si pozitiv ashtu edhe negativ. Por, nëse e doni apo e urreni atë, ai i shërbeu qëllimit të krijimit të përmbajtjes që ka tejkaluar kufijtë e kutisë.

Një pjesë e arsyes se kurrë nuk u zbatua plotësisht nga shfletuesit, përveç mendimit të fortë personal, ishte se ai konsiderohej si një efekt vizual dhe si i tillë, ai nuk duhet të përcaktohet nga HTML, i cili përcakton strukturën. Në vend të kësaj, efektet vizuale ose prezantuese duhet të menaxhohen nga CSS. Dhe CSS3 shton modulin e marquees për të kontrolluar se si shfletuesit shtojnë efektin e marquees tek elementët.

Prona të reja CSS3

CSS3 shton pesë prona të reja për të ndihmuar në kontrollin e përmbajtjes së përmbajtjes tënde në marquee: stili i mbipopullimit, stili i marquee, marquee-play-count, marquee-direction dhe speed-marquee.

overflow-style
Pronë e stilit të mbipopullimit (e cila gjithashtu diskutohet në artikullin CSS Overflow) përcakton stilin e preferuar për përmbajtjet që tejkalon kutinë e përmbajtjes. Nëse vendosni vlerën në rreshtin e distriktit ose mbyllni bllokimin, përmbajtja juaj do të rrëshqasë brenda dhe jashtë në të majtë / të djathtë (rresht) ose lart / poshtë (bllokohet).

çadër-style
Kjo pronë përcakton se si përmbajtja do të kalojë në pamje (dhe jashtë).

Opsionet janë të lëvizshme, rrëshqitje dhe alternim. Lëvizja fillon me përmbajtjen plotësisht jashtë ekranit dhe pastaj lëviz në të gjithë zonën e dukshme derisa të shfaqet plotësisht në ekran. Slide fillon me përmbajtjen krejtësisht jashtë ekranit dhe pastaj lëviz nëpër derisa përmbajtja të lëvizë plotësisht në ekran dhe nuk ka më përmbajtje të mbetur për të rrëshqitur në ekran.

Së fundi, alternativat kthehen nga njëra anë në tjetrën, duke lëvizur mbrapa dhe me radhë.

çadër-play-count
Një nga pengesat e përdorimit të elementit MARQUEE është që marquee kurrë nuk ndalet. Por me stilit të pronësisë, marquee-play-count, ju mund të vendosni marquee për të rrotulloni përmbajtjen brenda dhe jashtë për një numër të caktuar herë.

marquee-drejtim
Ju gjithashtu mund të zgjidhni drejtimin që përmbajtja duhet të lëvizë në ekran. Vlerat përpara dhe mbrapa janë të bazuara në drejtimshmërinë e tekstit kur stili i mbipopullimit është në përputhje me shtresën e jashtme dhe lart ose poshtë kur stili i mbipopullimit është bllok i kornizës.

Detajet e drejtimit të marquee

overflow-style Drejtimi i gjuhës përpara e kundërt
marquee-line ltr majtas e drejtë
RTL e drejtë majtas
marquee-bllok lart poshtë

çadër me shpejtësi
Kjo pronë përcakton se sa shpejt lëviz përmbajtja në ekran. Vlerat janë të ngadalta, normale dhe të shpejta. Shpejtësia aktuale varet nga përmbajtja dhe shfletuesi që shfaqet, por vlerat duhet të jenë të ngadalta, është më i ngadalshëm se normale, e cila është më e ngadalshme se shpejt.

Mbështetja e shfletuesit të pronave të tabelave

Ju mund të kenë nevojë të përdorni prefikset e shitësit për të marrë elementët e çadrës së CSS për të punuar. Ato janë si më poshtë:

CSS3 Prefiksi i shitësit
mbingarkesë-x: marquee-line; overflow-x: -webkit-marquee;
çadër-style -webkit-çadër-style
çadër-play-count -webkit-marquee-përsëritje
marquee-direction: përpara | kundërt; -webkit-marquee-direction: përpara | prapa;
çadër me shpejtësi -webkit-çadër me shpejtësi
nuk ka ekuivalent -webkit-marquee-rritje

Prona e fundit ju lejon të përcaktoni se sa hapa të mëdha ose të vogla duhet të jenë si përmbajtja e rrotullimeve në ekran në çadrën.

Në mënyrë që marka juaj të funksionojë, duhet të vendosni vlerat e paracaktuara të shitësit më parë dhe pastaj t'i përcillni ato me vlerat e specifikimit CSS3. Për shembull, këtu është CSS për një marquee që rrotullon tekstin pesë herë nga e majta në të djathtë brenda një kutie 200x50.

{
gjerësia: 200px; lartësia: 50px; hapësira e bardhë: nowrap;
përmbytje: fshehur;
overflow-x: -webkit-marquee;
-webkit-marquee-direction: përpara;
-webkit-marquee-style: shkoni;
-webkit-marquee-speed: normale;
-webkit-marquee-increment: i vogël;
-webkit-marquee-përsëritje: 5;
mbingarkesë-x: marquee-line;
marquee-direction: përpara;
marquee-style: shkoni;
marquee-speed: normale;
marquee-play-count: 5;
}