Efecto de Marquesina CSS3
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 sabios.
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 demostración similar: http://jsfiddle.net/jonathansampson/XxUXD/, usa text-indent pero aún con valores específicos.
Cualquier consejo será apreciado.
Fred
4 answers
Con un pequeño cambio en el marcado, este es mi enfoque (acabo de insertar un span dentro del párrafo):
Ejemplo de violín: http://jsfiddle.net/MaY5A/1 / (bordes incluidos solo para fines de depuración, probados en firefox y chrome)
Marcado
<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 han insertado valores codificados - dependientes del ancho del párrafo -
La animación aplica la propiedad CSS3 transform (use prefijos cuando sea necesario) para que funcione bien.
Si necesita insertar un retardo solo una vez al principio, también establezca un animation-delay. Si necesita insertar un pequeño retardo en cada bucle , intente jugar con un padding-left mayor (por ejemplo, 150%)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-02-24 06:50:05
Lo siguiente debería hacer lo que quieras.
@keyframes marquee {
from { text-indent: 100% }
to { text-indent: -100% }
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-20 11:48:02
Quería poner un comentario debajo de la respuesta de fcalderan pero todavía no tengo 50 rep. Disculpe....
Probé su respuesta y funcionó, más o menos. Si usted está experimentando un comportamiento extraño como:
- El texto se ralentiza cuando está completamente a la vista (incluso con
linear) - Cuando se usa
text-indent: -100%el texto se detiene en ~50%
Es posible que tenga la etiqueta css: text-align: center activada. Hace que sucedan cosas raras.
Solo quería agregarlo aquí en caso de que alguien tuviera problemas como yo.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-18 19:26:52
Creo que deberías ir por algún slider de texto javascript que funcione bien con todo el navegador. Me gustó este y se puede hacer más cosas con el mismo:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-20 12:05:08