MARQUEE u dobu HTML5 i CSS3

Oni od vas koji dugo čitaju HTML, možda će zapamtiti element. To je bio element specifičan za preglednik koji je stvorio zastavicu pomicanja teksta na zaslonu. Ovaj element nikada nije dodan u HTML specifikaciju, a podrška za njega u širokom rasponu varira od preglednika. Ljudi su često imali vrlo jake stavove o korištenju tog elementa - pozitivnog i negativnog. No, bilo da ste ga voljeli ili ste ga mrzili, poslužili su se u svrhu stvaranja sadržaja koji je prenio granice okvira vidljivim.

Dio motiva koji nikada nije implementirao preglednici, osim snažnog osobnog mišljenja, bio je to da se smatra vizualnim efektom i kao takav ne bi trebao biti definiran HTML-om koji definira strukturu. Umjesto toga, CSS treba upravljati vizualnim ili prezentacijskim efektima. A CSS3 dodaje modul marquee kako bi kontrolirala kako preglednici dodaju efekt marquee elementima.

Novi CSS3 svojstva

CSS3 dodaje pet novih svojstava kako bi pomogla u kontroli načina prikazivanja vašeg sadržaja u okviru: preljev-stil, nadstrešnica stilu, nadstrešnica-play-count, nadstrešnica-smjer i nadstrešnica brzine.

preljev-stil preljev-stil (što sam također raspravljao u članku CSS Overflow) definira željeni stil za sadržaje koji prelijevaju sadržajnu kutiju. Ako postavite vrijednost nadstrešnica linija ili pomični blok vaš sadržaj će se kliznuti prema dolje i ulijevo lijevo / desno (nadstrešnica linija) ili gore / dolje (pomični blok).

nadstrešnica stiluOvo svojstvo definira kako će se sadržaj premjestiti u prikaz (i van).

Opcije su svitak, klizanje i naizmjenično, Pomicanje počinje sa sadržajem potpuno isključenim zaslonom, a zatim se pomiče kroz vidljivo područje dok se ponovno ne isključi. Slide počinju sa sadržajem potpuno isključenog zaslona, ​​a zatim se pomiče sve dok se sadržaj potpuno ne preseli na zaslon i više nema sadržaja koji bi se mogao pomaknuti na zaslonu.

Na kraju, alternativni odbija sadržaj s jedne na drugu, klizeći naprijed-natrag.

nadstrešnica-play-countJedan od nedostataka korištenja NADSTREŠNICA element je da šator nikada ne prestaje. Ali sa stilom imovine nadstrešnica-play-count možete postaviti okvira za uključivanje i isključivanje sadržaja za određeni broj puta.

nadstrešnica-smjerTakođer možete odabrati smjer kojim se sadržaj treba pomicati na zaslonu. Vrijednosti naprijed i preokrenuti temelje se na usmjerenosti teksta kada se preljev-stil je nadstrešnica linija i gore ili dolje kada preljev-stil je pomični blok.

Pojedinosti o smjeru označavanja

preljev-stil	Jezični smjer	naprijed	preokrenuti
nadstrešnica linija	ltr	lijevo	pravo
	RTL	pravo	lijevo
pomični blok		gore	dolje

nadstrešnica brzineOvo svojstvo određuje brzinu pomicanja sadržaja na zaslonu. Vrijednosti su usporiti, normalan, i brzo, Stvarna brzina ovisi o sadržaju i pregledniku koji ga prikazuje, ali vrijednosti moraju biti usporiti je sporiji od normalan što je sporiji od brzo.

Podrška preglednika svojstava oznake

Možda ćete morati upotrijebiti prefikse dobavljača kako biste dobili elemente CSS okvira koji rade. Oni su kako slijedi:

CSS3	Prefiks dobavljača
overflow-x: crtica;	overflow-x: -webkit-marquee;
nadstrešnica stilu	-webkit-nadstrešnica stilu
nadstrešnica-play-count	-webkit-nadstrešnica-ponavljanje
smjera kretanja: naprijed | preokrenuti;	-webkit-marquee-direction: naprijed | unatrag;
nadstrešnica brzine	-webkit-nadstrešnica brzine
nema ekvivalenta	-webkit-priraštaj nadstrešnica-

Posljednja svojstva omogućuju vam da definirate kako bi trebali biti veliki ili mali koraci dok se sadržaj pomakne na zaslonu u okviru.

Da biste svoj marquee funkcionirali, najprije morate staviti predefinirane vrijednosti dobavljača, a zatim ih slijedite pomoću vrijednosti specifikacije CSS3. Na primjer, ovdje je CSS za okvir koji skenira tekst pet puta s lijeva na desno unutar okvira veličine 200 x 50.

{ širina: 200px; visina: 50px; bjelina: sada; prelijevanje: skriveno; preljev-x: -webkit-nadstrešnica; -webkit-marquee-direction: naprijed; -webkit-marquee-style: scroll; -webkit-marquee-speed: normalno; -webkit-marquee-inkrement: mali; -webkit-marquee-repetition: 5; overflow-x: crtica; smjera kretanja: naprijed; širina stila: pomaknite se; brzina okvira: normalno; brojčanik-igra broj: 5;}