HTML5 eta CSS3 testuinguru edukia sortzea MARQUEE gabe

HTML dutenak denbora luzez idazten ari direnak gogoratu dezake elementua. Nabigatzailearen berariazko elementua izan zen pantailan testua mugitzeko. Elementu hau ez zen sekula HTML zehaztapenik gehitu eta euskarri ugari izan zen nabigatzaile guztietan. Jendeak elementu honen erabilerari buruzko iritzi sendoak izan ditu askotan, bai positiboak bai negatiboak. Baina maite duzun edo gorrotatzen den ala ez, kutxa mugak gainezkatzen diren edukiak ikusarazteko helburua du.

Nabigatzaileek ez zuten garrantziaren zati bat, iritzi pertsonal sendoa alde batera utzita, efektu bisuala dela eta, horregatik, ez da definitu egitura definitzen duen HTML bidez. Horren ordez, ikusizko edo aurkezpen efektuak CSS bidez kudeatu behar lirateke. Eta CSS3 marquee modulua gehitzen du nabigatzaileek marken efektua osagai gisa nola kontrolatzen duten kontrolatzeko.

CSS3 propietate berriak

CSS3k bost propietate berriak gehitzen ditu markoan diseinatzen den edukia nola kontrolatzen laguntzeko: gainezkatze estiloa, marquee estiloa, marquee-play-count, marquee-direction eta marquee-speed.

gainezka estiloko
Gainazaleko estiloko propietateak (CSS-ko artikuluaren gainezkatzea ere eztabaidatu dut) edukia kutxa desbideratzen duten edukien hobespen estiloa definitzen du. Marquee-line edo marquee-block balioa ezartzen baduzu, ezkerreko / eskuineko (marquee-line) edo gora / behera lerroan (marquee-bloke) irristatuko zara.

karpa estiloko
Jabetza honek edukia nola (eta kanpora) mugituko den definitzen du.

Aukerak korritu, irristatu eta ordezkoak dira. Korritu pantaila edukia erabat itzaltzen da eta, ondoren, ikusgai dagoen eremuan zehar mugitzen da guztiz berriro pantailan. Diapositiba edukia guztiz itzalita dago eta edukia pantaila osoan zehar mugitu arte mugitzen da eta pantailan ezkutatzeko eduki gehiago ez dago.

Azkenean, ordezkoak edukia alde batera uztartzen du, atzera eta aurrera irristatuz.

karpa-play-zenbaketa
MARQUEE elementua erabiltzeak dituen desabantailei esker, karpa ez da inoiz gelditzen. Baina estiloaren propietate karpa-erreprodukzio-kontuarekin markaia konfiguratu dezakezu hainbat eta hainbat aldiz aktibatzeko eta desaktibatzeko.

karpa-norabidea
Edukia pantailan zehar mugitzeko norabidean ere aukeratu dezakezu. Balioak aurrera eta alderantziz testuaren zuzentasunean oinarritzen dira gainezkatze-estilo marquee lerroa denean eta gorantz edo beherantz mugitzeko estilo marquee-bloke denean.

Marquee-Direction Details

gainezka estiloko Hizkuntza Zuzendaritza aurrera alderantzizko
karpa-line ltr ezker eskuineko
RTL eskuineko ezker
karpa-blokea ireki behera

karpa abiadura
Propietate honek zehazten du nola azkar mugitzen den edukia pantailan. Balioak motelak, arruntak eta azkarrak dira. Benetako abiadura edukiaren eta arakatzailearen araberakoa da, baina balioak motela izan behar du, azkarrago baino azkarrago baino.

Arakatzailearen karpetako propietateen euskarria

Saltzailearen aurrefabeak erabili behar dituzu CSS markako elementuak lortzeko. Honako hauek dira:

CSS3 Saltzailearen aurrizkia
overflow-x: marquee-line; overflow-x: -webkit-marquee;
karpa estiloko -webkit-karpa estiloko
karpa-play-zenbaketa -webkit-karpa-errepikapena
marquee-direction: aurrera | alderantzikatu; -webkit-marquee-direction: aurrerantz | atzeraka;
karpa abiadura -webkit-karpa abiadura
ez da baliokidea -webkit-karpa-gehikuntza

Azken propietateari esker, urrats handiak edo txikiak zehaztea markoaren pantailan edukia korrituko den moduan izango da.

Zure karpa lan egiteko, saltzailearen aurrizki-balioak lehenbailehen kokatu behar dituzu eta ondoren jarraitu CSS3 zehaztapen-balioekin. Esate baterako, Hemen CSS da marquee testu bat bost aldiz mugitzen ezkerretik eskuinera 200x50 koadroko barruan.

{
zabalera: 200 px; altuera: 50 px; zuri-espazioa: nowrap;
gainezkatzea: ezkutatuta;
gainezkatzea-x: -webkit-karpa;
-webkit-marquee-direction: forwards;
-webkit-marquee-style: korritu;
-webkit-marquee-speed: normal;
-webkit-marquee-increment: txikia;
-webkit-marquee-repetition: 5;
overflow-x: marquee-line;
marquee-direction: aurrera;
marquee-style: korritu;
marquee-speed: normal;
marquee-play-count: 5;
}