Ṣiṣẹda Awọn akoonu lilọ kiri ni HTML5 ati CSS3 Laisi MARQUEE

Awọn ti o ti wa ni kikọ HTML fun igba pipẹ le ranti eleri. Eyi jẹ ohun elo ti n ṣakoso ẹrọ ti o ṣẹda ọpagun ti ọrọ ti nlọ kiri kọja iboju. A ko ṣe afikun irufẹ yii si fifiye si HTML ati atilẹyin fun o yatọ si gbogbo awọn aṣàwákiri. Awọn eniyan nigbagbogbo ni awọn ero to lagbara julọ nipa lilo lilo yii - ati awọn rere ati odi. Ṣugbọn boya o fẹran tabi korira rẹ, o ṣe iṣẹ idiyele ti ṣiṣe akoonu ti o bori awọn ifilelẹ apoti ti o han.

Eyi ti idi ti o ko ni iṣiṣe patapata nipasẹ awọn aṣàwákiri, yàtọ si ero ti ara ẹni lagbara, ni pe a kà a si ipa ojulowo ati gẹgẹbi iru eyi, ko yẹ ki a ṣe alaye nipasẹ HTML, eyiti o ṣe apejuwe ọna naa. Dipo, CSS gbọdọ ṣe itọju oju tabi igbejade. Ati pe CSS3 ṣe afikun awọn aami amie lati ṣakoso bi awọn aṣàwákiri ṣe nfi ipa ami si awọn eroja.

Awọn ohun-elo CSS3 tuntun

CSS3 ṣe afikun awọn ohun-ini titun marun lati ṣe iranlọwọ iṣakoso bi o ṣe han akoonu rẹ ni brande: oriṣi-ara-ara, ami-ara-ara, marquee-play-count, alakoso-itọsọna ati iyara-aarọ.

bomi-ara-ara
Ohun-ini omi-omi-nla (eyi ti mo tun ṣe apejuwe ninu àpilẹkọ CSS Overflow) ṣe alaye ọna ti o fẹran fun awọn akoonu ti o ṣabọ apoti apoti. Ti o ba ṣeto iye si ila-ika tabi ami-ami-akoonu rẹ akoonu yoo rọra sinu ati jade si apa osi / ọtun (laini ami-ika) tabi oke / isalẹ (ami-ami).

ami-ami-ara
Ilẹ-ini yii ṣe alaye bi akoonu naa yoo ṣe lọ si oju (ati jade).

Awọn aṣayan jẹ yiyọ, rọra ati iyipo. Ṣiṣe bẹrẹ pẹlu akoonu patapata iboju kuro, lẹhinna o gbe lọ kiri si agbegbe ti o han titi ti o fi pari gbogbo iboju patapata. Ibẹrẹ bẹrẹ pẹlu akoonu patapata iboju naa lẹhinna o gbe lọ kọja titi akoonu naa ti gbe pẹlẹpẹlẹ si oju iboju ati pe ko si akoonu diẹ ti o fi silẹ lati rọra loju iboju.

Nigbamii, ideri bounces akoonu lati ẹgbẹ si ẹgbẹ, sisun sẹhin ati siwaju.

aami-play-count
Ọkan ninu awọn abawọn ti lilo iṣẹ MARQUEE ni pe marquee ko duro. Ṣugbọn pẹlu awọn ami-ara-ami-play-ka-ara-ara ti o le ṣeto brande lati yi akoonu pada si ati pa fun nọmba kan pato.

ami-alakoso
O tun le yan itọsọna ti akoonu yẹ ki o yi lọ loju iboju. Awọn iṣiṣe siwaju ati yiyipada wa da lori itọsọna ti ọrọ naa nigbati oju-omi-ara jẹ ila-ami ati si oke tabi isalẹ nigbati oju-omi-ara jẹ ami-ami.

Alaye Awọn Itọsọna Marquee

bomi-ara-ara Ilana Ede siwaju yi pada
laini ila-ika Ltr apa osi ọtun
rtl ọtun apa osi
ami-ami-ami soke mọlẹ

aṣiṣe ami-ami
Ilẹ-ini yi pinnu bi o ṣe yarayara awọn akoonu akoonu loju iboju. Awọn iye ti o lọra, deede, ati ki o yara. Iyara gangan n da lori akoonu ati aṣàwákiri ti o fihàn, ṣugbọn awọn iye gbọdọ jẹ o lọra ju sita ju deede eyi ti o lorun ju sare lọ.

Imudani Burausa ti awọn Ohun-elo Marquee

O le nilo lati lo awọn prefixes ataja lati gba awọn eroja CES lati ṣiṣẹ. Wọn jẹ bi wọnyi:

CSS3 Ojulowo Aabo
bomi-x: laini ila-ika; dipo-x: -webkit-marquee;
ami-ami-ara -wiawiti-brande-stylee
aami-play-count -webkit-marquee-repetition
itọsọna alakoso: siwaju | yika; -disẹkititi-marquee-itọsọna: ṣiwaju | sẹhin;
aṣiṣe ami-ami -webkit-marquee-speed
ko si deede -webkit-marquee-increment

Ohun elo ti o kẹhin jẹ ki o setumo bi o tobi tabi kekere awọn igbesẹ yẹ ki o jẹ bi awọn akoonu akoonu lori iboju ni marquee.

Lati jẹ ki iṣẹ alabaṣe rẹ ṣiṣẹ, o gbọdọ fi awọn iṣowo ti o ti ṣaju tẹlẹ ṣaju akọkọ ati lẹhin naa tẹle wọn pẹlu awọn ipoyejuwe CSS3. Fun apẹẹrẹ, nibi CSS fun akọsilẹ ti o yi ọrọ naa ni igba marun lati apa osi si ọtun inu apoti 200x50 kan.

{
iwọn: 200px; iga: 50px; aaye-funfun: itọpa;
idapo: farasin;
dipo-x: -webkit-marquee;
-webkit-marquee-itọsọna: forwards;
-iwadi-brandkit-brande: yi lọ;
-iwadi-marquee-speed: deede;
-webkit-marquee-increment: kekere;
-webkit-marquee-repetition: 5;
bomi-x: laini ila-ika;
itọsọna alakoso: siwaju;
ami-ami-ara: yi lọ;
aṣiṣe ami-ami: deede;
marke-play-count: 5;
}