Kreye kontni defile nan HTML5 ak CSS3 san MARQUEE

Moun nan nou ki te ekri HTML pou yon tan long ka sonje eleman an. Sa a se te yon eleman navigatè espesifik ki te kreye yon banyè nan defile tèks atravè ekran an. Eleman sa a pa janm te ajoute nan spesifikasyon nan HTML ak sipò pou li varye lajman atravè navigatè. Moun yo souvan te gen opinyon trè fò sou itilizasyon sa a eleman - tou de pozitif ak negatif. Men, si ou renmen oswa te rayi li, li te sèvi bi pou yo fè kontni ki debòde limit yo bwat vizib.

Pati nan rezon ki fè li pa te janm konplètman aplike pa navigatè, sou kote soti nan opinyon fò pèsonèl, te ke li konsidere kòm yon efè vizyèl ak jan sa yo, li pa ta dwe defini nan HTML la, ki defini estrikti a. Olye de sa, efè vizyèl oswa prezantasyon yo ta dwe jere pa CSS. Ak CSS3 ajoute modil la chaplèt kontwole ki jan navigatè ajoute efè a marque eleman.

Nouvo CSS3 Pwopriyete

CSS3 ajoute senk nouvo pwopriyete ede kontwole ki jan kontni ou montre nan chapèl la: debòde-style, makèt style, makèt-jwe-konte, makèt-direksyon ak makèt-vitès.

debòde-style
Plan an debòde-style (ki mwen te diskite tou nan atik la CSS Plis pase) defini style la pi pito pou sa ki debòde bwat la kontni. Si ou mete valè a nan liy-liy oswa mak-bloke kontni ou ap glise nan ak soti sou bò gòch / dwat (makèt-liy) oswa moute / desann (chapant-blòk).

makèt-style
Pwopriyete sa a defini kijan kontni an pral deplase nan wè (ak soti).

Opsyon yo ap woule, glise ak altène. Scroll kòmanse ak kontni an konplètman sou ekran, ak Lè sa a, li deplase atravè zòn nan vizib jiskaske li se tout konplètman sou ekran ankò. Slide kòmanse ak kontni an konplètman sou ekran ak Lè sa a li deplase atravè jouk kontni an te konplètman te deplase sou ekran an epi pa gen okenn kontni plis kite yo glise sou ekran an.

Anfen, altène rebondi kontni an ki sòti bò kote, glisman retounen ak lide.

Montre-jwe-konte
Youn nan dezavantaj yo nan lè l sèvi avèk eleman nan MARQUEE se ke makè a pa janm sispann. Men, avèk style la style karakteristik-jwe-konte ou ka mete makè a vire tout kontni an sou yo ak sou pou yon kantite espesifik de fwa.

makèt-direksyon
Ou ka chwazi tou direksyon ki kontni an ta dwe woule sou ekran an. Valè yo pi devan ak ranvèse yo baze sou direksyon nan tèks la lè debòde-style la se mak-liy ak monte oswa desann lè debòde-style la se mark-blòk.

Make-Direksyon Detay

debòde-style Direksyon lang pou pi devan ranvèse
makèt-liy ltr kite dwa
rtl dwa kite
makèt-blòk up desann

makèt-vitès
Sa a pwopriyete detèmine ki jan byen vit kontni an woulo sou ekran an. Valè yo se ralanti, nòmal, ak vit. Vitès aktyèl la depann sou kontni an ak navigatè a montre li, men valè yo dwe ralanti pi dousman pase nòmal ki se pi dousman pase vit.

Navigatè sipò nan pwopriyete yo Marquee

Ou ka bezwen sèvi ak prefiks machann pou jwenn eleman yo CSS nan travay. Yo jan sa a:

CSS3 Machann Prefiks
debòde-x: makèt-liy; debòde-x: -webkit-marque;
makèt-style -webkit-marque-style
Montre-jwe-konte -webkit-marque-repetisyon
makèt-direksyon: pou pi devan | do; -webkit-marque-direksyon: anvwa | bak;
makèt-vitès -webkit-marque-vitès
pa ekivalan -webkit-marque-enkreman

Dènye pwopriyete a pèmèt ou defini ki jan gwo oswa ti etap sa yo ta dwe kòm kontni woulo yo sou ekran nan chapèl la.

Yo nan lòd yo gen chapi ou ap travay, ou ta dwe mete vandè a prefiks valè premye ak Lè sa a, swiv yo ak valè yo espesifikasyon CSS3. Pou egzanp, isit la se CSS la pou yon chapèl ki woule tèks la senk fwa nan gòch a dwat andedan yon bwat 200x50.

{
lajè: 200px; wotè: 50px; blan-espas: nowrap;
debòde: kache;
debòde-x: -webkit-marque;
-webkit-marque-direksyon: anvwa;
-webkit-marque-style: woulo liv;
-webkit-makèt-vitès: nòmal;
-webkit-marque-enkreman: ti;
-webkit-marque-repetisyon: 5;
debòde-x: makèt-liy;
makèt-direksyon: pi devan;
Montre-style: woulo liv;
makèt-vitès: nòmal;
Montre-jwe-konte: 5;
}}