texto - Efecto de marquesina CSS3

texto animado html

Question

Estoy creando un efecto de marquesina con animación CSS3. Aquí están mis códigos.

Etiqueta HTML:

<div id="caption">
    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.
</div>

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; }  }

Ahora puedo obtener el efecto de marquesina básico, pero los códigos no son lo suficientemente inteligentes.

Me pregunto si hay una manera de evitar el uso de valores específicos como margin-left:-4200px; , para que pueda adaptar el texto en cualquier longitud.

Además, no funciona sin problemas en Firefox y Safari, funciona bien en Chrome.

Aquí hay una demo similar: http://jsfiddle.net/jonathansampson/XxUXD/ , utiliza text-indent pero todavía con valores específicos.

Cualquier consejo será apreciado.

Fred

Answer 1

Con un pequeño cambio en el marcado, este es mi enfoque (acabo de insertar un span dentro del párrafo):

Ejemplo Fiddle: http://jsfiddle.net/MaY5A/1/ (bordes incluidos solo para depuración, probados en Firefox y Chrome)

Margen

<p class="microsoft marquee"><span>Windows 8 and ...</span></p>

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); }
}

No se insertaron valores codificados, que dependen del ancho del párrafo

La animación aplica la propiedad de transform CSS3 (use prefijos cuando sea necesario) para que funcione bien.

Si necesita insertar un retraso solo una vez al comienzo, también configure un animation-delay . Si, en cambio, necesita insertar un pequeño retraso en cada bucle, intente jugar con un padding-left más alto padding-left (por ejemplo, 150% )

Answer 2

Creo que deberías ir a algún control deslizante de texto de JavaScript que funcione bien con todo el navegador. Me gustó este y puedes hacer más cosas con el mismo:

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

Answer 3

Lo siguiente debe hacer lo que quieras.

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

Answer 4

Quería poner un comentario debajo de la respuesta de fcalderan, pero todavía no tengo 50. Lo siento.

Intenté su respuesta y funcionó, más o menos. Si estás experimentando un comportamiento extraño como:

• El texto se ralentiza cuando está completamente a la vista (incluso con linear )
• Al usar text-indent: -100% el texto se detiene en ~ 50%

Puede tener la etiqueta css: text-align: center on. Causa cosas raras que sucedan. Solo quería agregarlo aquí en caso de que alguien tuviera problemas como yo.