Effetto Marquee CSS3

Sto creando un effetto di selezione con l’animazione CSS3. Ecco i miei codici.

Tag HTML:

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog.

CSS:

 #caption { position: fixed; bottom: 0; left: 0; font-size: 20px; line-height: 30px; height:30px; width: 100%; white-space: nowrap; -moz-animation: caption 50s linear 0s infinite; -webkit-animation: caption 50s linear 0s infinite; } @-moz-keyframes caption { 0% { margin-left:120%; } 100% { margin-left:-4200px; } } @-webkit-keyframes caption { 0% { margin-left:120%; } 100% { margin-left:-4200px; } } 

Ora posso ottenere l’effetto di selezione di base, ma i codici non sono abbastanza saggi.

Mi chiedo se c’è un modo per evitare l’uso di valori specifici come margin-left:-4200px; , in modo che possa adattare il testo in qualsiasi lunghezza.

Inoltre, non funziona in modo fluido in Firefox e Safari, si comporta bene in Chrome.

Ecco una demo simile: http://jsfiddle.net/jonathansampson/XxUXD/ , usa il text-indent ma ancora con valori specifici.

Qualsiasi consiglio sarà apprezzato.

Fred

Con un piccolo cambiamento del markup, ecco il mio approccio (ho appena inserito uno span all’interno del paragrafo):

Esempio Fiddle: http://jsfiddle.net/MaY5A/1/ (bordi inclusi solo per scopi di debug, testati su firefox e chrome)


markup

 

Windows 8 and ...

CSS

 .marquee { width: 450px; margin: 0 auto; white-space: nowrap; overflow: hidden; box-sizing: border-box; } .marquee span { display: inline-block; padding-left: 100%; /* show the marquee just outside the paragraph */ animation: marquee 15s linear infinite; } .marquee span:hover { animation-play-state: paused } /* Make it move */ @keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } } 

Non sono stati inseriti valori hardcoded, dipendenti dalla larghezza del paragrafo

L’animazione applica la proprietà di transform CSS3 (usa prefissi dove necessario) in modo che funzioni bene.

Se è necessario inserire un ritardo una sola volta all’inizio, impostare anche un animation-delay . Se hai invece bisogno di inserire un piccolo ritardo ad ogni ciclo, prova a giocare con un padding-left più alto padding-left (ad es. 150% )

Il seguente dovrebbe fare quello che vuoi.

 @keyframes marquee { from { text-indent: 100% } to { text-indent: -100% } } 

Volevo inserire un commento sotto la risposta di fcalderan ma non ho ancora nessun rappresentante. Scusate.

Ho provato la sua risposta e ha funzionato, un po ‘. Se si verificano comportamenti strani come:

  • Il testo rallenta quando è completamente visibile (anche se linear )
  • Quando si usa il text-indent: -100% il testo si ferma a ~ 50%

Potresti avere il tag css: text-align: center on. Fa accadere cose strane. Volevo solo aggiungerlo qui nel caso qualcuno avesse problemi come quello che avevo.

Penso che dovresti optare per un cursore di testo javascript che funziona bene con tutto il browser. Mi è piaciuto questo e puoi fare più cose con lo stesso:

http://jscroller2.markusbordihn.de/example/endless/