Slenkamo turinio kūrimas HTML5 ir CSS3 be MARQUEE
Stanislovas Pytelis / Getty Images
Tie, kurie ilgą laiką rašė HTML, gali prisiminti šį elementą. Tai buvo konkrečiai naršyklei skirtas elementas, sukūręs ekrane slenkančio teksto reklamjuostę. Šis elementas niekada nebuvo pridėtas prie HTML jos specifikacijos ir palaikymas įvairiose naršyklėse labai skyrėsi. Žmonės dažnai turėjo labai tvirtą nuomonę apie šio elemento naudojimą - tiek teigiamą, tiek neigiamą. Tačiau nesvarbu, ar mylėjote, ar nekentėte, jis pasitarnavo tam, kad turinys, peržengęs dėžutės ribas, būtų matomas.
Viena iš priežasčių, kodėl naršyklės jo niekada iki galo neįdiegė, be tvirtos asmeninės nuomonės, buvo ta, kad jis laikomas vaizdiniu efektu, todėl jo neturėtų apibrėžti HTML, kuris apibrėžia struktūrą. Vietoj to, vaizdo ar pateikimo efektus turėtų valdyti CSS. Ir CSS3 prideda „Marquee“ modulį, kad būtų galima valdyti, kaip naršyklės prideda palapinės efektas į elementus.
Naujos CSS3 ypatybės
CSS3 prideda penkis naujų savybių padėti valdyti, kaip jūsų turinys bus rodomas palapinėje: perpildymo stilius, palapinės stilius, palapinės atkūrimo skaičius, palapinės kryptis ir palapinės greitis.
perpildymo stiliaus
Perpildymo stiliaus ypatybė (kurią taip pat aptarėme straipsnyje CSS perpildymas) apibrėžia pageidaujamą turinio, kuris užpildo turinio laukelį, stilių. Jei nustatysite reikšmę „Marquee-line“ arba „Marquee-block“, jūsų turinys slinks į kairę / dešinę (pažymėjimo linija) arba aukštyn / žemyn (pažymėjimo blokas).
palapinės stiliaus
Ši savybė apibrėžia, kaip turinys bus perkeltas į rodinį (ir iš jo). Variantai yra slinkti , slyskite ir pakaitomis. Slinkimas pradedamas visiškai išjungus turinį, o tada juda per matomą sritį, kol vėl visiškai išjungiamas ekranas. Slinkimas pradedamas visiškai išjungus turinį, o tada juda tol, kol turinys visiškai persikelia į ekraną ir ekrane nebelieka turinio, kurį būtų galima slysti. Galiausiai, pakaitinis perkelia turinį iš vienos pusės į kitą, slysdamas pirmyn ir atgal.
marquee-play-count
Vienas iš MARQUEE elemento trūkumų yra tas, kad palapinė niekada nesustoja. Tačiau naudodami stiliaus ypatybę marquee-play-count galite nustatyti, kad palapinė įjungtų ir išjungtų turinį tam tikrą skaičių kartų.
palapinės kryptis
Taip pat galite pasirinkti kryptį, kuria turinys turėtų slinkti ekrane. Vertės pirmyn ir atgal yra pagrįstos teksto kryptingumu, kai perpildymo stilius yra marquee-line ir aukštyn arba žemyn, kai perpildymo stilius yra marquee-block.
Marquee-Direction detalės
| |_+_| | Kalbos kryptis | Persiųsti | atvirkščiai |
|---|---|---|---|
| |_+_| | ltr | paliko | teisingai |
| rtl | teisingai | paliko | |
| |_+_| | aukštyn | žemyn |
palapinės greitis
Ši savybė nustato, kaip greitai turinys slenka ekrane. Vertės yra lėtos, normalios ir greitos. Tikrasis greitis priklauso nuo turinio ir jį rodančios naršyklės, tačiau reikšmės turi būti lėtos yra lėtesnės nei įprasta, o tai yra lėtesnė nei greita.
„Marquee Properties“ naršyklės palaikymas
Jums gali tekti naudoti pardavėjo priešdėliai kad CSS palapinės elementai veiktų. Jie yra tokie:
| CSS3 | Pardavėjo priešdėlis |
|---|---|
| |_+_| | |_+_| |
| |_+_| | |_+_| |
| |_+_| | |_+_| |
| |_+_| | |_+_| |
| |_+_| | |_+_| |
| nėra lygiavertis | |_+_| |
Paskutinė ypatybė leidžia apibrėžti, kokie dideli ar maži turėtų būti žingsniai, kai turinys slenka ekrane.
Kad palapinė veiktų, pirmiausia turėtumėte įdėti tiekėjo reikšmes su prefiksais, o paskui jas sekti su CSS3 specifikacijos reikšmėmis. Pavyzdžiui, čia yra CSS, skirtas palapinei, kuri penkis kartus slenka tekstu iš kairės į dešinę 200 x 50 laukelyje.
|_+_|