Els que heu estat escrivint HTML durant molt de temps podrien recordar l'element. Aquest va ser un element específic del navegador que va crear una pancarta de desplaçament de text a la pantalla. Aquest element no s'ha afegit mai a l' especificació HTML i el seu suport va variar àmpliament en els navegadors. Sovint, les persones tenien opinions molt fortes sobre l'ús d'aquest element, tant positiu com negatiu. Però si t'ha encantat o odiat, ha servit per crear contingut que desbordava els límits del quadre.
Part de la raó per la qual mai no va ser implementada completament pels navegadors, a part d'una forta opinió personal, era que es considerava un efecte visual i com a tal, no s'hauria de definir per l'HTML, que defineix l'estructura. En lloc d'això, els efectes visuals o de presentació han de ser gestionats per CSS. I CSS3 afegeix el mòdul de marquesina per controlar com els navegadors afegeixen l'efecte marquee als elements.
Noves propietats CSS3
CSS3 afegeix cinc propietats noves per ajudar a controlar el contingut del vostre contingut a la marquesina: estil de desbordament, marquee-style, marquee-play-count, marquee-direction i marquee-speed.
estil de desbordament
La propietat d'estil de desbordament (que també vaig comentar a l'article CSS Overflow) defineix l'estil preferit per als continguts que desborden el quadre de contingut. Si configureu el valor a la línia de marquesina o marquee-block, el vostre contingut es desplaçarà cap a l'esquerra / dreta (marquee-line) o cap amunt / avall (marquee-block).
estil de marquesina
Aquesta propietat defineix com es mourà el contingut (i fora).
Les opcions es desplacen, es llisquen i s'alternen. El desplaçament comença amb la pantalla de contingut completament deslligada i, a continuació, es mou per l'àrea visible fins que torni a estar completament fora de la pantalla. La diapositiva comença amb el contingut completament fora de la pantalla i després es mou cap amunt fins que el contingut s'ha mogut completament a la pantalla i no hi ha més contingut que queda per lliscar a la pantalla.
Finalment, els suplents reboten el contingut d'un costat a un, desplaçant-se d'anada i tornada.
marquee-play-count
Un dels inconvenients d'utilitzar l'element MARQUEE és que la marquesina mai no s'atura. Tanmateix, amb el marquee-play-count de propietats d'estil, podeu configurar la marquesina per a girar el contingut durant un nombre determinat de vegades.
adreça de marquesina
També podeu triar la direcció en què el contingut s'hauria de desplaçar a la pantalla. Els valors forward i reverse es basen en la direccionalitat del text quan l'estil de desbordament és marquee-line i amunt o avall quan l'estil de desbordament és marquesina.
Detalls de la marquesina
| estil de desbordament | Direcció d'Idiomes | endavant | invers |
|---|---|---|---|
| línia de marquesina | ltr | esquerra | dret |
| rtl | dret | esquerra | |
| marquesina | up | avall |
marquee-speed
Aquesta propietat determina la rapidesa amb que el contingut es desplaça a la pantalla. Els valors són lents, normals i ràpids. La velocitat real depèn del contingut i del navegador que la mostra, però els valors han de ser més lents que el normal, que és més lent que ràpid.
Suport del navegador de les propietats de marquesina
És possible que hàgiu d'utilitzar els prefixos del venedor per tal que funcionin els elements de marcatge CSS. Són els següents:
| CSS3 | Prefix del venedor |
|---|---|
| desbordament-x: línia de marquesina; | overflow-x: -webkit-marquee; |
| estil de marquesina | -webkit-marquee-style |
| marquee-play-count | -webkit-marquee-repetició |
| marquee-direction: forward | reverse; | -webkit-marquee-direction: forward | backwards; |
| marquee-speed | -webkit-marquee-speed |
| sense equivalents | -webkit-marquee-increment |
L'última propietat us permet definir quina mida o petita han de ser els passos a mesura que el contingut es desplaça a la pantalla de la marquesina.
Per tal que funcioni la vostra marquesina, primer heu de col·locar els valors prefixats del proveïdor i, després, seguir-los amb els valors d'especificació CSS3. Per exemple, aquí teniu el CSS per a una carpa que es desplaça el text cinc vegades d'esquerra a dreta dins d'una caixa de 200 x 50.
{
ample: 200 px; alçada: 50px; white-space: nowrap;
desbordament: amagat;
overflow-x: -webkit-marquee;
-webkit-marquee-direction: forward;
-webkit-marquee-style: scroll;
-webkit-marquee-speed: normal;
-webkit-marquee-increment: petit;
-webkit-marquee-repetition: 5;
desbordament-x: línia de marquesina;
marquee-direction: forward;
marquee-style: scroll;
marquee-speed: normal;
marquee-play-count: 5;
}