JMiur [E]

Este es un efecto creado exclusivamente con CSS donde ciertas palabras se animan, "cayendo" ordenadamente y son reemplazadas por otras usando transiciones y animaciones. En el sitio d los desarrolladores hay varios ejemplos con variaciones pero, todos comparten la misma idea general. En principio, empezamos con el HTML, una serie de etiquetas SPAN dentro de un DIV:
<div class="rw-sentence">
  <span>Un ejemplo</span>
  <span>donde las palabras</span>
  <span>se van cayendo:</span>
  <div class="rw-words rw-words-1">
    <span>uno</span>
    <span>dos</span>
    <!-- etc etc etc -->
    <span>tres</span>
  </div>
</div>
Eso es simple aunque si se coloca dentro de un psot de Blogegr, hay que tener cuidado con los saltos de línea.
Un ejemplo donde las palabras se van cayendo:
unodostrescuatrocincoseis
Y claro, el CSS:
<style>
  .rw-sentence { /* el DIV donde se verá el efecto */
    margin: 0 auto;
    text-align: left;
    width: 400px;
  }
  .rw-sentence span { /* cada uno de los párrafs */
    color: #AAA;
    font-size: 30px;
  }
  .rw-words { /* las palabras que caen */
    display: inline;
    text-indent: 10px;
  }
  .rw-words-1 span { /* la primera palabra */
    color: White;
    position: absolute;
    opacity: 0;
    overflow: hidden;
    /* la animación */
    -moz-transform-origin: 10% 75%;
    -webkit-transform-origin: 10% 75%;
    -o-transform-origin: 10% 75%;
    -ms-transform-origin: 10% 75%;
    transform-origin: 10% 75%;
    -moz-animation: rotateWord 18s linear infinite 0s;
    -webkit-animation: rotateWord 18s linear infinite 0s;
    -o-animation: rotateWord 18s linear infinite 0s;
    -ms-animation: rotateWord 18s linear infinite 0s;
    animation: rotateWord 18s linear infinite 0s;
  }
  /* la animación de las siguientes */
  .rw-words span:nth-child(2) { /* la segunda */
    color: Red;
    -moz-animation-delay: 3s; 
    -webkit-animation-delay: 3s; 
    -o-animation-delay: 3s; 
    -ms-animation-delay: 3s; 
    animation-delay: 3s; 
  }
  .rw-words span:nth-child(3) { /* la tercera */
    color: Aqua;
    -webkit-animation-delay: 6s; 
    -moz-animation-delay: 6s; 
    -o-animation-delay: 6s; 
    -ms-animation-delay: 6s; 
    animation-delay: 6s;
  }
  .rw-words span:nth-child(4) { /* la cuarta */
    color: Bisque;
    -moz-animation-delay: 9s; 
    -webkit-animation-delay: 9s; 
    -o-animation-delay: 9s; 
    -ms-animation-delay: 9s; 
    animation-delay: 9s;
  }
  .rw-words span:nth-child(5) { /* la la quinta */
    color: CadetBlue;
    -moz-animation-delay: 12s; 
    -webkit-animation-delay: 12s; 
    -o-animation-delay: 12s; 
    -ms-animation-delay: 12s; 
    animation-delay: 12s;
  }
  .rw-words span:nth-child(6) { /* la última */
    color: Yellow;
    -moz-animation-delay: 15s; 
    -webkit-animation-delay: 15s; 
    -o-animation-delay: 15s; 
    -ms-animation-delay: 15s; 
    animation-delay: 15s;
  }
   /* y las reglas de las animaciones para cada navegador */
  @-moz-keyframes rotateWord { /* Firefox */
    0% { opacity: 0; }
    5% { opacity: 1; }
    17% { opacity: 1; -moz-transform: rotate(0deg); }
    19% { opacity: 1; -moz-transform: rotate(98deg); }
    21% { opacity: 1; -moz-transform: rotate(86deg); }
    23% { opacity: 1; -moz-transform: translateY(85px) rotate(83deg); }
    25% { opacity: 0; -moz-transform: translateY(170px) rotate(80deg); }
    80% { opacity: 0; }
    100% { opacity: 0; }
  }
  @-webkit-keyframes rotateWord { /* Chrome/Safari */
    0% { opacity: 0; }
    5% { opacity: 1; }
    17% { opacity: 1; -webkit-transform: rotate(0deg); }
    19% { opacity: 1; -webkit-transform: rotate(98deg); }
    21% { opacity: 1; -webkit-transform: rotate(86deg); }
    23% { opacity: 1; -webkit-transform: translateY(85px) rotate(83deg); }
    25% { opacity: 0; -webkit-transform: translateY(170px) rotate(80deg); }
    80% { opacity: 0; }
    100% { opacity: 0; }
  }
  @-o-keyframes rotateWord { /* Opera */
    0% { opacity: 0; }
    5% { opacity: 1; }
    17% { opacity: 1; -o-transform: rotate(0deg); }
    19% { opacity: 1; -o-transform: rotate(98deg); }
    21% { opacity: 1; -o-transform: rotate(86deg); }
    23% { opacity: 1; -o-transform: translateY(85px) rotate(83deg); }
    25% { opacity: 0; -o-transform: translateY(170px) rotate(80deg); }
    80% { opacity: 0; }
    100% { opacity: 0; }
  }
  @-ms-keyframes rotateWord { /* IE IE9/10 */
    0% { opacity: 0; }
    5% { opacity: 1; }
    17% { opacity: 1; -ms-transform: rotate(0deg); }
    19% { opacity: 1; -ms-transform: rotate(98deg); }
    21% { opacity: 1; -ms-transform: rotate(86deg); }
    23% { opacity: 1; -ms-transform: translateY(85px) rotate(83deg); }
    25% { opacity: 0; -ms-transform: translateY(170px) rotate(80deg); }
    80% { opacity: 0; }
    100% { opacity: 0; }
  }
  @keyframes rotateWord { /* genérica */
    0% { opacity: 0; }
    5% { opacity: 1; }
    17% { opacity: 1; transform: rotate(0deg); }
    19% { opacity: 1; transform: rotate(98deg); }
    21% { opacity: 1; transform: rotate(86deg); }
    23% { opacity: 1; transform: translateY(85px) rotate(83deg); }
    25% { opacity: 0; transform: translateY(170px) rotate(80deg); }
    80% { opacity: 0; }
    100% { opacity: 0; }
  }
</style>
REFERENCIAS:codrops

12 comentarios:

kwon sang woo  

^^ exelente lo prove !!
gracias por el tutorial :D

Responder
Cocina  

Que buenoo!maravilloso!

Responder
Manuel Alberto  

He usado imágenes y gifs animados y las posibilidades creativas se multiplican.

Gracias JMiur!!! :D

Responder
Neonius  

Me gustó mucho. Excelente efecto. El único problema es la cantidad de código, pero bueno... Está genial el efecto.

JMiur  

Todo lo bueno tiene su costo :D

Responder
Unknown  

Yo lo use con imagenes y me funciona genial al igual que todo lo que he probado de aqui. Gracias por los codigos realmente me ayudan a crear algo que dificilmente lograria solo. les dejo el tema en el que lo use talvez lo unico es : de que forma agregar mas images que si pongo mas de 6 se empalman. salu2
http://litchisproject.blogspot.mx/2012/06/accel-world-mundo-acelerado.html

Responder
Empar  

Hola. Lo he puesto en un post y con Firefox, Chrome funciona, pero por extrañas razones, con el navegador Safari el blog no carga las entradas ni la barra lateral.
En cambio, entro en el blog de litchisproject, que tambien lo ha utilizado en un post, y con Safari lo veo estupendamente.
Tengo un Mac y no entiendo por qué sucede esto... No sé si podrás ayudarme....
Saludos.
http://historiaenpresent.blogspot.com.es/2012/06/els-treballs-finals.html

JMiur  

No sabría decirte el motivo. Chrome y Safari usan el mismo motor así que debería funcionar de modo similar en ambos navegadores.

Empar  

Gracias. Ya sabemos que lo lo lógico a veces

Responder
Empar  

Perdón, entró el enter antes de tiempo. Decía que a veces lo lógico no lo es tanto. Pero por si es un error mio y no de la no-lógica: en la plantilla ¿dónde hay que pegar exactamente el CSS?
Gracias.

JMiur  

Puede colocarse junto con el resto de los estilos de la plantilla o en la entrada o elemento HTML donde vayas a utilizarlo.

Responder
Berta Fernández-Viña Fernández  

Hola: es GENIAL!!!
Me quedó precioso.
NT: Recibido el e-mail,muchas gracias seguiré buscando.

Responder

¿Quiere dejar un comentario?

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

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