Kujenga Maudhui ya Scrollable katika HTML5 na CSS3 Bila MARQUEE

Wale ambao wameandika HTML kwa muda mrefu wanaweza kukumbuka kipengele. Hii ilikuwa kipengele maalum cha kivinjari ambacho kiliunda bendera ya maandishi ya kupiga kote kwenye skrini. Kipengele hiki hajawahi kuongezwa kwenye vipimo vya HTML na usaidizi kwao tofauti sana kwenye vivinjari. Watu mara nyingi walikuwa na maoni mazuri juu ya matumizi ya kipengele hiki - chanya na hasi. Lakini ikiwa umependa au unaichukia, ilifanya kazi ya kusudi la kufanya maudhui ambayo yalizidi mipaka ya sanduku inayoonekana.

Moja ya sababu haijawahi kutekelezwa kikamilifu na browsers, isipokuwa na maoni yenye nguvu ya kibinafsi, ilikuwa kwamba inachukuliwa kuwa ya athari ya kuona na kwa hiyo, haipaswi kutafanuliwa na HTML, ambayo inafafanua muundo. Badala yake, athari za kuona au zawadi zinapaswa kusimamiwa na CSS. Na CSS3 inaongeza moduli ya marquee ili kudhibiti jinsi browsers kuongeza athari marquee kwa vipengele.

Mali mpya ya CSS3

CSS3 inaongeza mali tano mpya ili kusaidia kudhibiti maudhui yako yaliyoonyeshwa kwenye marquee: style ya kuongezeka, style marquee, marquee-play-count, marquee-uongozi na marquee-kasi.

style ya kufurika
Mali ya mtindo wa kuongezeka (ambayo niliyojadili pia katika makala ya CSS Overflow) inatafanua mtindo uliopendekezwa kwa yaliyomo ambayo huongeza sanduku la maudhui. Ikiwa utaweka thamani kwenye mstari wa marquee au marquee-kuzuia maudhui yako yataingia ndani na nje kuelekea kushoto / kulia (marquee-line) au up / down (marquee-block).

mtindo wa marquee
Mali hii inafafanua jinsi maudhui yatakavyoingia kwenye mtazamo (na nje).

Chaguo ni scroll, slide na mbadala. Mchapishaji huanza na yaliyomo kabisa kwenye skrini, na kisha huenda kwenye eneo inayoonekana mpaka kabisa iko mbali tena skrini. Slide huanza na maudhui yaliyozima kabisa screen na kisha inapita mpaka maudhui yamehamia kikamilifu kwenye skrini na hakuna maudhui zaidi yaliyotakiwa kupigwa kwenye skrini.

Hatimaye, mbadala hupiga maudhui kutoka upande kwa upande, kusonga mbele na nje.

toa-kucheza-hesabu
Moja ya kutokuwepo kwa kutumia kipengele cha MARQUEE ni kwamba marquee haachi kamwe. Lakini kwa usanidi wa maandishi ya maandishi ya mtindo unaweza kuweka marquee kugeuza maudhui na kuacha kwa idadi maalum ya nyakati.

marquee-mwelekeo
Unaweza pia kuchagua mwelekeo ambao maudhui yanapaswa kutazama skrini. Maadili ya mbele na ya kurejea yanategemea uongozi wa maandiko wakati mtindo wa kuongezeka ni mstari wa marquee na juu au chini wakati mtindo wa kuongezeka ni marquee block.

Maelezo ya Mwelekeo

style ya kufurika Mwelekeo wa lugha mbele reverse
marquee-line ltr kushoto haki
rtl haki kushoto
marquee block up chini

kasi ya marquee
Mali hii huamua jinsi maudhui yanavyopuka haraka kwenye skrini. Maadili ni ya polepole, ya kawaida, na ya haraka. Kasi halisi inategemea maudhui na kivinjari kukionyesha, lakini maadili lazima yawe polepole ni polepole kuliko ya kawaida ambayo ni polepole kuliko ya haraka.

Msaada wa Browser wa Mali ya Marquee

Huenda unahitaji kutumia prefixes ya muuzaji ili kupata vipengele vya CSS vya kazi. Wao ni kama ifuatavyo:

CSS3 Prefix Muuzaji
overflow-x: marquee-line; overflow-x: -webkit-marquee;
mtindo wa marquee style-marquee-style
toa-kucheza-hesabu marudio-marudio-marudio
mwelekeo wa marquee: mbele | reverse; Mwelekeo -webkit-marquee: mbele | nyuma;
kasi ya marquee -buki-marquee-kasi
hakuna sawa -kubwa-marquee-increment

Mali ya mwisho inakuwezesha kufafanua jinsi vipimo vidogo au vilivyopaswa kuwa kama maudhui yaliyo kwenye skrini kwenye marquee.

Ili uwe na marquee yako ya kufanya kazi, unapaswa kuweka kwanza maadili ya prefixed kwanza na kisha ufuate kwa maadili ya vipimo vya CSS3. Kwa mfano, hapa ni CSS kwa marquee ambayo inaandika maandishi mara tano kutoka kushoto kwenda kulia ndani ya sanduku la 200x50.

{
upana: 200px; urefu: 50px; nafasi nyeupe: sasa;
overflow: siri;
overflow-x: -webkit-marquee;
Mwelekeo -webkit-marquee: mbele;
style-marque-marquee: scroll;
-blog-marquee-kasi: kawaida;
-kubwa-marquee-increment: ndogo;
marudio-marudio-marudio: 5;
overflow-x: marquee-line;
mwelekeo wa marquee: mbele;
style marquee: scroll;
marquee-kasi: kawaida;
uchezaji-kucheza-hesabu: 5;
}