Crea Scrollable Contenutu in HTML5 è CSS3 Sette MARQUEE

Quelli di voi chì anu scrittu HTML per un pezzu di tempu pò esse ricordati l'elementu. Hè un elementu specifichi di navigatore chì hà creatu un pianu di scrolling testu nantu à a pantalla. Stu elementu hè statu mai addunatu à l' esemplazione HTML è u sustegnu per questu varià largamente in i navigatori. A ghjente hà avutu un avutu assai forte nantu à l'usu di questu l'elementu - pusitivu è negativu. Ma s'ellu ci hà amatu o odiatu, hà fattu serve l'usità di fà u cuntenutu chì supranava a boxe frontiere visibile.

Partu di u mutivu è ùn era mai più implementatu da i navigatori, da parte di l'opinione persone forte, era chì hè cunsideratu un effettu viscuali è com'è tali, ùn deve esse micca definitu da l'HTML, chì definisce l'estructura. Invece, l'effetti visitatori o di presentazione deve esse amministratu da CSS. CSS3 aghjusta u modulu di marchee per u cuntrollu di chì i browsers aghjunghjenu l'effettu marchetta à i elementi.

New CSS3 Properties

CSS3 aghjusteghja cinqui propjeta immubiliate per aiutà u cuntrollu di u vostru cuntenutu demoniche in a marchee: stilata, struttura di marchee, marquee-play-count, marquee-direction è marquee-speed.

supraniunale
A pruprietà di stilata (ch'e aghju scrittu ancu in l'articulu CSS Overlough) define l'istilu preferitu per u cuntenutu chì supira u casu di cuntenutu. Se stabilisce u valore à marquee-line o marquee-block u vostru cuntenutivu viaghjeranu cumandamenti è fora à a left / right (marquee-line) o up / down (marquee-block).

marchee-style
Sta pruprietà definisce cumu u cuntenutu si spustà in vista (è fora).

L'opzioni sò scroll, slide e alternate. Scroll in cumencia cù u cuntenutu tutale cumpletta micca, è poi si movi versu l'area visuali finu à chì hè tutte tutte di cumpunimentu. A pagina hè fatta cù u cuntenutu tutale cumpletta è scorri hè tutta finu à chì u cuntenutu hà tramutu sanu sanu à u screnu è ùn ci hè nimu più di cuntenutu à sviate à sbulà nantu à u screnu.

Finalmente, alterne bounces the content from side to side, sliding back and forth.

marquee-play-count
Unu di i disunori d'utilizà l'element MARQUEE hè chì a marquee ùn stà mai. Ma cù l'immubiliate struttura di marchee-play-count si pò pudeti mette u marchee per rottità u cuntenutu fora è di un certu numulu di volte.

marquee-direction
Pudete puru sceglie a direzzione chì u cuntenutu devi scurrirete nantu à a schermu. I valori avere è versione sò basati nantu à a direzzione di u testu quandu l'estensivu supranaturale hè marquee-line è questu o quandu quandu l'estensione sopra è marquee-block.

Marquee-Direction Details

supraniunale Direzione di Lingua avanti reverse
marquee-line ltr manca diritta
rtl diritta manca
marquee-block up falà

marchee-speed
Questa basa determina quantu rapidamente u scrollamentu di u cuntenutu in a pantalla. I valori sò lento, normale è veloci. A vittima propria dipende u cuntenutu è u navigatore manifestanu, ma i valori sò stati ritardi hè più lento di u solitu chì hè più lento que rapidu.

Assistente di u Navigatore di i Marquee Properties

Pudete bisognu di utilizà prefixi di vinditore per acquistà l'elementi di marchetta CSS per travaglià. Sò cusì:

CSS3 Prefix di vendite
rivoluzione-x: marquee-line; spiscina-x: -webkit-marquee;
marchee-style -webkit-marquee-style
marquee-play-count -webkit-marquee-repetition
marquee-direction: forward | reverse; -webkit-marquee-direction: forwards | backwards;
marchee-speed -webkit-marquee-speed
nisun equivalenti -webkit-marquee-increment

L'ultima propietate vi permette di definisce quale grande o chjuce i passi sò da esse u scrollamentu di cuntenutu in a screen in a marquee.

Per avè a vostra marchee di travagliendu, deverà cumprà i primi prefixi di vindite è seguità dopu cù i valori di specificazioni CSS3. Per esempiu, quì hè a CSS per una marchee chì scrollle u testu cinque volte da isedda à dirusta in una caixa di 200x50.

{
larghezza: 200px; altu: 50px; biancu-space: nowrap;
ribbellu: oculistica;
spiscina-x: -webkit-marquee;
-webkit-marquee-direction: forward;
-webkit-marquee-style: scroll;
-webkit-marquee-speed: normal;
-webkit-marquee-increment: small;
-webkit-marquee-repetition: 5;
rivoluzione-x: marquee-line;
marquee-direction: forward;
marquee-style: scroll;
marchee-speed: normal;
marquee-play-count: 5;
}