JMiur [E]

La marquees o marquesinas in spanish, son una forma de mostrar distinto contenido, desplazándolo en cierta dirección. En HTML es una etiqueta bastante sencilla pero carece de opciones sofisticadas y ese desplazamiento es relativamente abrupto y constante con lo que los textos no suelen ser muy legibles.

Con JavaScript es posible generar cosas similares y desplazar textos de distintos modos pero, hongkiat.com muestra una tercera opción que es generar marquees utilizando sólo CSS.

Claro, aparentemente, si uno lee "utilizando sólo CSS" se imagina que es más sencillito pero, lamentablemente, aunque la idea es sencilla, como se utilizan propiedades que aún no están unificadas en todos los navegadores, es engorroso andar escribiendo cada una de ellas, sobre todo, las que que definen las reglas de las animaciones.

De todos modos, acá vamos ...

El HTML donde colocaremos nuestra marquesina es simple, un DIV con cierta clase donde cada texto se incluye con una etiqueta P y si en el ejemplo uso dos clase simultáneamente es para poder controlar las dos variantes, una se moverá horizontalmente y otra, verticalmente:
<div class="marquee marqueeV">
<p> una línea de texto </p>
<p> otra línea de texto </p>
</div>
¿Por qué sólo pongo dos textos? Este sería el CSS genérico:
/* al contenedor lo dimesionamos tanto en su ancho como su alto */
.marquee {
  border: 1px solid #444;
  border-radius: 5px;
  height: 50px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 500px;
}
/* cada párrafo */
.marquee p {
  color: #FFF;
  font-family: Tahoma, Arial, sans-serif;
  height: 100%;
  line-height: 50px;
  margin: 0;
  position: absolute;
  text-align: center;
  width: 100%;
  -moz-transform:translateX(100%);
  -webkit-transform:translateX(100%);
  transform:translateX(100%);
}
Y ahora, la animación de cada una de las etqieutas P:
.marqueeH p:nth-child(1) {
  -moz-animation: left-one 20s ease infinite;
  -webkit-animation: left-one 20s ease infinite;
  animation: left-one 20s ease infinite;
}
.marqueeH p:nth-child(2) {
  -moz-animation: left-two 20s ease infinite;
  -webkit-animation: left-two 20s ease infinite;
  animation: left-two 20s ease infinite;
}

/* lo molesto es de tener que crear las animaciones para cada navegador */

/* Mozilla */
@-moz-keyframes left-one {
  0%{-moz-transform:translateX(100%);}
  10% {-moz-transform:translateX(0);}
  40% {-moz-transform:translateX(0);}
  50% {-moz-transform:translateX(-100%);}
  100%{-moz-transform:translateX(-100%);}
}
@-moz-keyframes left-two {
  0% {-moz-transform:translateX(100%);}
  50% {-moz-transform:translateX(100%);}
  60% {-moz-transform:translateX(0);}
  90% {-moz-transform:translateX(0);}
  100%{-moz-transform:translateX(-100%);}
}

/* Chrome/Safari */
@-webkit-keyframes left-one {
  0% {-webkit-transform:translateX(100%);}
  10% {-webkit-transform:translateX(0);}
  40% {-webkit-transform:translateX(0);}
  50% {-webkit-transform:translateX(-100%);}
  100%{-webkit-transform:translateX(-100%);}
}
@-webkit-keyframes left-two {
  0% {-webkit-transform:translateX(100%);}
  50% {-webkit-transform:translateX(100%);}
  60% {-webkit-transform:translateX(0);}
  90% {-webkit-transform:translateX(0);}
  100%{-webkit-transform:translateX(-100%);}
}
Donde, la velocidad es controlada por el valor indicado en:
animation: left-two 20s ease infinite;

usando animaciones para crear "marquees" con estilo ...

cada item se encuentra en una etiqueta <p></p>


Animarlo verticalmente es similar, hay que cambiar la clase y luego, crear cada una de las reglas:
<div class="marquee marqueeV">
  .......
</div>

usando animaciones para crear "marquees" con estilo ...

esta otra se mueve verticalmente


.marqueeV p {
  -moz-transform:translateY(-100%);
  -webkit-transform:translateY(-100%);
  transform:translateY(-100%);
}
.marqueeV p:nth-child(1) {
  -moz-animation: down-one 20s ease infinite;
  -webkit-animation: down-one 20s ease infinite;
  animation: down-one 20s ease infinite;
}
.marqueeV p:nth-child(2) {
  -moz-animation: down-two 20s ease infinite;
  -webkit-animation: down-two 20s ease infinite;
  animation: down-two 20s ease infinite;
}
@-moz-keyframes down-one {
  0%{-moz-transform:translateY(-100%);}
  10% {-moz-transform:translateY(0);}
  40% {-moz-transform:translateY(0);}
  50% {-moz-transform:translateY(100%);}
  100%{-moz-transform:translateY(100%);}
}
@-moz-keyframes down-two {
  0% {-moz-transform:translateY(-100%);}
  50% {-moz-transform:translateY(-100%);}
  60% {-moz-transform:translateY(0);}
  90% {-moz-transform:translateY(0);}
  100%{-moz-transform:translateY(100%);}
}
@-webkit-keyframes down-one {
  0% {-webkit-transform:translateY(-100%);}
  10% {-webkit-transform:translateY(0);}
  40% {-webkit-transform:translateY(0);}
  50% {-webkit-transform:translateY(100%);}
  100%{-webkit-transform:translateY(100%);}
}
@-webkit-keyframes down-two {
  0% {-webkit-transform:translateY(-100%);}
  50% {-webkit-transform:translateY(-100%);}
  60% {-webkit-transform:translateY(0);}
  90% {-webkit-transform:translateY(0);}
  100%{-webkit-transform:translateY(100%);}
}

16 comentarios:

Ciberwing  

Que buena idea, que tiempo que no veía los marquees pero la verdad
debo decir que se ven bien con el efecto que le diste de tiempo.

Responder
Gem@  

Me ha encantado el resultado una pena no haberlo visto antes pero siempre se está a tiempo :D

Responder
Ignacio Barrios  

Buenísimo, me gustó, excelente para un sitio de noticias, gracias nuevamente!

Responder
3rn3st0  

Hace ya algún tiempo te escribí para mejorar unos efectos de marquesina hechos con JavaScript. Hoy, gracias a este post, veo la solución a todos mis males, sólo puedo decirte esto JMiur: ¡Muchísimas gracias! Mejor no pudo ser la solución :-)

Responder
Yurika-Chan  

Me funciono pero solo con dos textos, al poner el tercero, se sobreponen unos con otros

JMiur  

Para agreagr un tercero debes crear las animaciones para ese nuevo texto y cambair el CSS con todas als complciaciones del caso.

Yurika-Chan  

Si yo lo agregue, por eso se me hace extraño que no funcione

JMiur  

Habría que ver tu ejemplo pero, no creo que sea algo sencillo de resolver, no en vano, los ejemplos del desarrollador sólo muestran dos textos.

Responder
VacilandoUnRap  

y puedo usar esto y mostrar la ultimas entradas de un blog en general con este estilo? mostrando solo los títulos de las entradas...

JMiur  

Es probable que si pero deberás resolver todos los detalles y crear las reglas de estilo para mostrar más de dos.

Responder
Alcion Inugami  

Una buena idea seria cambiar los textos por imagenes y así crear una galería animada :B y lo mejor es que solo seria con css a diferencia de otras que ofrecen por ahi.

Angelo Delgado  

Eso es lo que quiero hacer pero no se como.Haber si me ayudas estaría muy agradecido.

Responder
Angelo Delgado  

Como lo haría con imagenes?? alguien que me pueda ayudar.. Gracias

JMiur  

SImplemente poniendo etiquetas IMG en lugar de textos pero, los detalles deberás verlos en el contexto en que lo quieras colocar.

Responder
Antonio Penia  

***A mi me quedo así de 3 mensajes

*****HTML
div class="marquee marqueeV"
p una una de una /p
p otra línea de texto /p
p mi línea parrafo /p
/div
/**/
/**/
@-moz-keyframes down-one {
0%{-moz-transform:translateX(-100%);}
10% {-moz-transform:translateX(0);}
32% {-moz-transform:translateX(0);}
33% {-moz-transform:translateX(100%);}
100%{-moz-transform:translateX(100%);}
}
@-moz-keyframes down-two {
0% {-moz-transform:translateX(-100%);}
33% {-moz-transform:translateX(0);}
65% {-moz-transform:translateX(0);}
66% {-moz-transform:translateX(100%);}
100%{-moz-transform:translateX(100%);}
}
@-moz-keyframes down-tree {
0% {-moz-transform:translateX(-100%);}
65% {-moz-transform:translateX(-100%);}
66% {-moz-transform:translateX(0);}
90% {-moz-transform:translateX(100%);}
100%{-moz-transform:translateX(100%);}
}

@-webkit-keyframes down-one {

0% {-webkit-transform:translateX(-100%);}
10% {-webkit-transform:translateX(0);}
30% {-webkit-transform:translateX(0);}
40% {-webkit-transform:translateX(100%);}
100%{-webkit-transform:translateX(100%);}
}
@-webkit-keyframes down-two {
0% {-webkit-transform:translateX(-100%);}
30% {-webkit-transform:translateX(-100%);}
40%{-webkit-transform:translateX(0);}
60% {-webkit-transform:translateX(0);}
70% {-webkit-transform:translateX(100%);}
100%{-webkit-transform:translateX(100%);}
}
@-webkit-keyframes down-tree {

0%{-webkit-transform:translateX(-100%);}
60% {-webkit-transform:translateX(-100%);}
75% {-webkit-transform:translateX(0);}
95% {-webkit-transform:translateX(0);}
100% {-webkit-transform:translateX(100%);}

}

Responder
Luis Hernan Gonzalez  

La verdad esta muy bueno pero no se donde poner cada cosa.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR