Ritināmā satura izveide HTML5 un CSS3 bez MARQUEE

Tie no jums, kuri ilgu laiku rakstījuši HTML , var atcerēties elementu. Tas bija pārlūkprogrammai raksturīgs elements, kas visā ekrānā izveidoja rullīša tekstu. Šis elements nekad nav pievienots HTML specifikācijai, un tā atbalstam visās pārlūkprogrammās bija ļoti atšķirīgs. Cilvēkiem bieži bija ļoti spēcīgi viedokļi par šī elementa izmantošanu - gan pozitīvu, gan negatīvu. Bet vai jūs to mīlēja vai ienīda, tas kalpoja tam, lai izveidotu saturu, kas pārklāja redzamās lodziņa robežas.

Daļa no iemesla, kāds pārlūkprogrammām to pilnībā neīstenoja, izņemot personīgo viedokli, bija tas, ka tas tiek uzskatīts par vizuālu efektu, un tādēļ to nevajadzētu definēt HTML, kas definē struktūru. Tā vietā vizuālas vai prezentācijas sekas jāpārvalda CSS. Un CSS3 pievieno marķējuma moduli, lai kontrolētu, kā pārlūkprogrammas elementiem pievieno marķējuma efektu .

Jaunas CSS3 īpašības

CSS3 pievieno piecas jaunas īpašības, lai palīdzētu kontrolēt to, kā jūsu saturs tiek rādīts laukumā: pārpildes stils, marķiera stils, marķieru spēles, marķieru virziens un marķiera ātrums.

pārpildes stils
Pārpildes stila īpašums (ko es arī apsprieda rakstā CSS Overflow) definē vēlamo saturu saturam, kas pārplūst satura lodziņā. Ja iestatāt vērtību marquee-line vai marquee-bloķēt, saturs slīdēs un pa kreisi pa kreisi / pa labi (marquee-line) vai augšup / lejup (marquee-block).

marķiera stils
Šis īpašums nosaka, kā saturs tiks pārvietots skatā (un ārpus tā).

Iespējas ir ritināt, slaidu un aizstājēju. Ritināšana sākas ar saturu pilnīgi izslēgtā ekrānā, un tad tas pārvietojas pa redzamo laukumu, līdz tas atkal ir pilnīgi izslēgts. Slaids sākas ar saturu pilnīgi izslēgtā ekrānā, un pēc tam tas pāriet līdz brīdim, kad saturs ir pilnībā pārvietots uz ekrāna, un ekrānam nav bijušas vairāk informācijas.

Visbeidzot, aizstājējs atslābina saturu no vienas puses uz otru, slīdot uz priekšu un atpakaļ.

marquee-play-count
Viens no MARQUEE elementa izmantošanas trūkumiem ir tas, ka telts nekad nebeidzas. Bet, izmantojot stila īpašumu marquee-play-count, jūs varat iestatīt marķējumu, lai konkrētu skaitu reižu pagrieztu saturu un izslēgtu to.

marķējuma virziens
Jūs varat arī izvēlēties virzienu, kādā saturam vajadzētu ritināt ekrānā. Uz priekšu un pretēji izrietošās vērtības pamatojas uz teksta virzību, ja pārpildes stilists ir līnijas līnija, un uz augšu vai uz leju, ja pārpildes stilists ir marķēšanas bloks.

Marķiera virziena detaļas

pārpildes stils Valodas virziens uz priekšu mainīt
marķiera līnija ltr pa kreisi pa labi
rtl pa labi pa kreisi
jumta bloks uz augšu uz leju

marķiera ātrums
Šis īpašums nosaka, cik ātri saturs ritina ekrānā. Vērtības ir lēnas, normālas un ātras. Faktiskais ātrums ir atkarīgs no tā satura un pārlūka, kurā tas parādās, bet vērtībām jābūt lēnām, lēnāk nekā parasti, kas ir lēnāka nekā strauja.

Marķiera īpašību pārlūka atbalsts

Lai iegūtu CSS marķiera elementus darbam, jums, iespējams, būs nepieciešams izmantot piegādātāja prefiksus . Tie ir šādi:

CSS3 Piegādātāja prefikss
pārpilde-x: marquee-line; pārpilde-x: -webkit-marquee;
marķiera stils -webkit-marquee-stila
marquee-play-count -webkit-marquee-atkārtojums
marķējuma virziens: uz priekšu | reverss; -webkit-marķiera virziens: uz priekšu | atpakaļ;
marķiera ātrums -webkit-marquee-ātrums
nav ekvivalenta -webkit-marquee-pieaugums

Pēdējais īpašums ļauj noteikt, cik lielas vai mazas ir vajadzīgās darbības, kad saturs ritē ekrānā.

Lai jūsu telts darbotos, vispirms vispirms jāpievieno piegādātāju prefiksu vērtības un pēc tam izpildiet CSS3 specifikācijas vērtības. Piemēram, šeit ir CSS marķierim, kas ritina tekstu piecas reizes no kreisās uz labo lodziņā ar 200x50.

{
platums: 200 pikseļi; augstums: 50 pikseļi; balta vieta: tagad;
pārplūde: slēpta;
pārpilde-x: -webkit-marquee;
-webkit-marķējuma virziens: uz priekšu;
-webkit-marquee-style: ritiniet;
-webkit-marķiera ātrums: normāls;
-webkit-marquee-increment: mazs;
-webkit-marquee-atkārtojums: 5;
pārpilde-x: marquee-line;
marķiera virziens: uz priekšu;
marķiera stils: ritiniet;
marķiera ātrums: normāls;
marķiera spēles skaits: 5;
}