Rótulo estilo flash | Oloblogger Esta es una forma de colocar un rótulo en nuestra web, de manera que el texto aparezca poco a poco y...

20 de enero de 2010

Rótulo estilo flash

Esta es una forma de colocar un rótulo en nuestra web, de manera que el texto aparezca poco a poco y además con un curioso efecto de reutilización de las letras comunes en las líneas sucesivas. Pinchando en la imagen podreis ver un ejemplo en movimiento. Precisamente, la animación es lo interesante.



Se trata de un script construido por dhteumeuleu en cuya web podreis ver un montón de ejemplos de diseños de alta calidad, hechos con sólo html y sobre todo, javascript.

La instalación es sencilla, porque es suficiente con añadir un gadget HTML/JavaScript y copiar allí el contenido de este fichero txt. Una vez grabado, el sitio más adecuado parece que es encima o debajo de las entradas y si os parece lo mismo, allí es dónde tendreis que mover el nuevo gadget después de creado.

El código resulta algo complicado para mis limitados conocimientos, pero algo he podido configurar.

En la primera parte (estilo, CSS) podeis definir en #frm, el alto, ancho y color de fondo del cuadro contenedor, así como el tipo de letra y su tamaño.

Para cambiar otras cosas, ya hay que bucear en la parte JavaScript, aunque casi todo lo interesante está prácticamente al final.

...
elapsedTime = new Date().getTime(); setTimeout(main, 32); } return { init : function (cont, t1, t2, c1, c2, c3) { frm = document.getElementById(cont); lineDelay = t1; charDelay = t2; colorText = c1; colorMatch = c2;
colorGhost = c3; loadLines(); main(); },

changeText : function () { document.getElementById("show").className = "";
document.getElementById("inputext").className = "hidden"; lineChar = []; animStack = []; colorStack = []; frm.innerHTML = ""; lineIndex = 0; elapsedTime = 0; loadLines(); frm.focus(); },show : function () {document.getElementById("show").className = "hidden"; document.getElementById("inputext").className = ""; document.getElementById("text").focus(); }}}(); onload = function () {
mtx.init("frm", 1500, 150, [255,255,255], [255,64,0], [44,44,44]);
...

El valor que lleva el setTimeout (32 en el trozo reproducido), marca el ritmo general de la animación. A mayor valor, más despacio.
1500: pausa de transición entre líneas. A mayor valor, más despacio.
150: pausa de transición entre caracteres. A mayor valor, más despacio.
255,255,255: color final de los caracteres en RGB (blanco en el ejemplo)
255,64,0: color de los caracteres "móviles" en RGB (naranja en el ejemplo)
44,44,44: color de los caracteres de las líneas anteriores en RGB (gris oscuro en el ejemplo)

Por último, dentro del TEXTAREA es dónde tiene que ir el texto a mostrar. Cada línea aquí se corresponderá con una línea del rótulo. No se pueden hacer muy largas porque no serán visibles y además el script no traga muy bien con ellas.

El script funciona en todos los casos, pero en algunas pruebas que he hecho con ciertas plantillas muy modificadas, lo hacía regular, así que si en vuestro caso pasa esto, no os volvais locos... ya encontraremos otra cosa que haga algo parecido.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

13 comentarios :

  1. Excelente Entrada Felicidades Oloman

    ResponderEliminar
  2. Muy bueno, Oloman!! como siempre, excelentes post!
    Saludos

    ResponderEliminar
  3. Gracias amigo, como siempre tuenando nuestros blogs.

    Pero hoy vengo con una pregunta, ya hace tiempo que utilice el truco aquel que explicaste de de transformar el blog en entradas resumidas con el "leer mas" y la imagen reducida.

    Ahora quiero hacer un blog solo de videos de youtube y me preguntaba si hay alguna manera de conseguir el mismo efecto pero en vez de una imagen que se vea la captura del video que se suele ver antes de darle al play. No se si me he explicado.

    Gracias, un saludo.

    ResponderEliminar
  4. La captura del vídeo que comentas, realmente es un frame congelado. Ese script no captura frames.

    Sin embargo, se me ocurre que para obtener el resultado que quieres, se podría hacer el post de manera que lo que se viera fuera una imagen que tu crearas y que fuera un enlace que abriera el vídeo.

    En esta entrada tienes una forma de hacer esto. Sólo tienes que pinchar en el logo de YouTube que hay al final para ver el efecto.

    La imagen de enlace sería la que se mostraría en los posts resumidos.

    ResponderEliminar
  5. Te mando un cordial saludo y te escribo para invitarte a que agregues tu blog a Territorio Blogs un directorio exclusivo para blogs. Al estar tu blog agregado podrás ganar visitantes de manera considerable.
    Si te interesa visita el sitio: http://territorioblogs.blogspot.com/

    saludos!

    ResponderEliminar
  6. Hola Oloman quería saber como hacer para que en el inicio de mi blog las entradas sea vean como en el tuyo: Sólo el título y parte de la entrada, q se vean las más recientes y no todas... Gracias :D

    ResponderEliminar
  7. Pantostao, este es el sistema que yo uso
    http://oloblogger.blogspot.com/2009/06/post-en-forma-de-sumarios-leer-mas-en.html

    y este es otro distinto para un resultado parecido...
    http://oloblogger.blogspot.com/2009/03/estilo-revista-magazine-simplificado.html

    ResponderEliminar
  8. Hola!

    Genial! me gustó! y lo incluí!

    aunque me falta ponerlemi feeling!

    Oye, como puedo chekar como se ve mi blog con otro navegadores? tengo que instalarlos todos? No existe algun truco para evitarme eso?

    Saludos.

    ResponderEliminar
  9. Todos no, pero sí los más habituales. Yo pruebo las modificaciones en IE, FF, Chrome y Safari.

    De todas formas sí que hay algunos servicios que te sirven hacer eso mismo de un golpe. Permíteme que lo deje para un post. Un saludo

    ResponderEliminar
  10. Excelente post cientos de utilidades que se les puede dar....

    ResponderEliminar