Ustvarjanje spremenljivih vsebin v HTML5 in CSS3 Brez MARQUEE

Tisti, ki ste že dolgo pisali HTML, se lahko spomnite elementa. To je bil element, specifičen za brskalnik, ki je na zaslonu ustvaril banner pomikajočega se besedila. Ta element ni bil nikoli dodan v specifikacijo HTML in podpora za to se je v različnih brskalnikih zelo razlikovala. Ljudje so pogosto imeli zelo trdna mnenja o uporabi tega elementa - tako pozitivnega kot negativnega. Ampak, če ste ga radi ali sovražili, je služil namenu izdelave vsebine, ki je prelila vidne meje polja.

Del razloga, ki ga brskalniki niso nikoli v celoti izvajali, je poleg trdnega osebnega mnenja tudi to, da se šteje za vizualni učinek, zato ga HTML ne definira, kar opredeljuje strukturo. Namesto tega morajo vizualne ali predstavitvene učinke upravljati CSS. In CSS3 doda modul marquee, da nadzira, kako brskalniki dodajajo učinek marquee elementom.

Nove lastnosti CSS3

CSS3 dodaja pet novih lastnosti, ki vam pomagajo nadzirati, kako se vaša vsebina prikaže v maratonu: slog preletov, način marquee, marquee-play count, marquee-direction in marquee-speed.

prelivi
Lastnost lastnosti sloga (ki sem ga tudi razpravljala v članku CSS Overflow) določa prednostni slog za vsebine, ki prelivajo polje z vsebino. Če ste vrednost nastavili na marquee-line ali marquee-block, bo vaša vsebina pomaknjena in odšla na levo / desno (marque-line) ali gor / dol (robni blok).

v stilu šotora
Ta lastnost določa, kako se bo vsebina premaknila v pogled (in zunaj nje).

Možnosti so pomikanje, pomikanje in zamenjava. Pomik se začne z vsebino povsem izklopljenega zaslona, ​​nato se premakne čez vidno področje, dokler ni popolnoma popolnoma izklopljen. Diapozitiv se začne z vsebino povsem izklopljenega zaslona, ​​nato pa se premika, dokler se vsebina popolnoma ne premakne na zaslon, in na zaslonu ni več vsebine.

Nazadnje, nadomestni odkloni vsebino z ene strani na drugo, drsi naprej in nazaj.

marquee-play-count
Ena izmed pomanjkljivosti uporabe elementa MARQUEE je, da se oznaka nikoli ne ustavi. Toda s stilom lastnosti marquee-play-count lahko nastavite šotor, da določen čas vklopite ali izklopite vsebino.

smer vožnje
Izberete lahko tudi smer, na katero naj se vsebina pomakne na zaslonu. Vrednosti naprej in nazaj temeljijo na usmerjenosti besedila, ko je prelivni slog markirni liniji in navzgor ali navzdol, ko je prelivni slog robotični blok.

Podrobnosti o usmeritvi

prelivi Jezik smer naprej obratno
marquee-line ltr levo prav
rtl prav levo
Blokirni blok up navzdol

hitrost brisanja
Ta lastnost določa, kako hitro se vsebina pomika na zaslonu. Vrednosti so počasne, normalne in hitro. Dejanska hitrost je odvisna od vsebine in brskalnika, ki ga prikazuje, vendar morajo biti vrednosti počasne počasnejše od običajne, kar je počasnejše od hitrosti.

Podpora brskalnika za znamke Marquee

Morda boste morali uporabiti predpono ponudnika, da bodo elementi CSS elementov delali. Ti so naslednji:

CSS3 Ponudnik prodajalca
preliv-x: marque-line; preliv-x: -webkit-marquee;
v stilu šotora -strankarsko-šotorski slog
marquee-play-count -webkit-marquee-ponavljanje
smer vožnje: naprej | vzvratno; -webkit-marquee-direction: forward | nazaj;
hitrost brisanja -webkit-marquee-hitrost
ni enakovrednega -webkit-marquee-prirastek

Zadnja lastnost vam omogoča, da določite, kako velik ali majhen morajo biti koraki, ko se vsebina pomika na zaslonu v maratonu.

Če želite, da bodo vaši marki delovali, morate najprej postaviti predpono prodajalca, nato pa jih slediti s specifikacijami CSS3. Na primer, tukaj je CSS za oznako, ki petkrat prečka besedilo od leve proti desni v okence 200x50.

{
širina: 200px; višina: 50 slikovnih pik; belo-prostor: zdaj;
preliv: skrit;
preliv-x: -webkit-marquee;
-webkit-marquee-direction: forward;
-webkit-marquee-style: pomikanje;
-webkit-marquee-speed: normalno;
-webkit-marquee-inkrement: majhen;
-webkit-marquee-ponavljanje: 5;
preliv-x: marque-line;
smer vožnje: naprej;
slog robnice: pomikanje;
marquee-speed: normalno;
marquee-play-count: 5;
}