Efecto marquee con CSS3

Siguiendo con las pruebas de animación utilizando propiedades CSS3, he encontrado un efecto muy interesante, el efecto de marquilla.... Consiste en una animación simple donde el texto se va desplazando según queramos, lo básico es lo siguiente:
.animacion {
display:block;
width:auto;
height:40px;
position:absolute;
font-family:georgia, serif;
font-size:16px;
line-height:40px;
float:left;
width:auto;
color:#000;
font-weight:bold;
padding:0 10px;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration:17s;
-webkit-animation-name: scroll;
}

.animacion a {color:#c00;}

@-webkit-keyframes scroll {
0% {left:90%;}
100% {left:-100%;}
}

.animacion:hover { -webkit-animation-play-state: paused;}

   Con "@-webkit-keyframes" es que definimos el tipo de scroll (movimiento) que realizará, le indicamos que comience desde cero y termine al final del texto (100%), "-webkit-animation-iteration-count", "-webkit-animation-timing-function", "webkit-animation-duration" y "-webkit-animation-name" son las mas importantes, explico lo que hace cada una:

-webkit-animation-iteration-count: para repetir, es quien crea el efecto de que el texto pasa de un lado a otro, si lo dejamos en blanco el texto no se repite.
-webkit-animation-timing-function: para generar el efecto, mas info en wiki (está en inglés).
-webkit-animation-duration: la duración en segundos, mientras menos segundos mas rápida es la transición.
-webkit-animation-name: nombre de la clase contenedora al efecto (en este caso 'scroll').

   Ya con esto solo nos queda la parte de HTML, la cual va así:
Mi Texto

   Y obtendremos como resultado lo siguiente:

Esto es una prueba


   Esto es lo básico y como siempre podemos agregar mas propiedades css, incluso un segundo contenedor para obtener un recuadro en el efecto, el css para el contenedor podría ser el siguiente...
.contenedor {
width:100%;
height:40px;
overflow:hidden;
position:relative;
border:1px solid #aaa;
margin:0 auto;
-o-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-o-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
background:#4ad;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
}

Probando CSS3. "carlitox en la web".

   Y modificando las propiedades que se mencionaron anteriormente obtendríamos el siguiente resultado, misma clase otro efecto.
@-webkit-keyframes scroll {
0% {left:0;}
50% {left:50%;}
}

Hasta podemos hacer que el texto rebote.
Y seguir utilizando enlaces, "carlitox en la web".

   Incluso, podemos jugar con las propiedades y crear efectos de autoescritura....

Esto solo puedes verlo en navegadores con soporte de CSS3.

4 Comentarios

Escribir Comentario
XURREREITOR
AUTOR
6 de marzo de 2012, 16:43 delete

En mozilla no se ve, solo en chrome y eso es un problema, no se si se podrá solucionar
1 saludo

Responder
avatar
6 de marzo de 2012, 16:46 delete

Que versión de firefox utilizas?? Porque desde la 7 todo normal... Saludos!

Responder
avatar
Anónimo
AUTOR
23 de marzo de 2012, 13:29 delete

Tu sitio se ve pésimo en IE9 creo que eso no es muy inteligente.... en Chrome perfecto...

Responder
avatar
23 de marzo de 2012, 13:32 delete

Si, hace tiempo que deje de optimizar el diseño del blog por falta de tiempo, dispongo de escasos minutos, por eso esta algo descuidado en cuanto compatibilidad se refiere, disculpa las molestias que eso pueda ocasionar.... Saludos!

Responder
avatar

Lamentablemente hay muchos usuarios en la red que han llegado al blog para escribir obscenidades, así que la moderación se hace necesaria. Recuerda utilizar un lenguaje correcto y espera a que sea aprobado.

Si necesitas publicar código haz click en "Conversión" para hacerlo legible.
ConversiónConversión EmoticonEmoticon