Facebook Twitter Pinterest GooglePlus Instagram Cómo incorporar texto e imágenes en movimiento | Café largo de ideas - Decoración, reciclaje, DIY, blogging

Cómo incorporar texto e imágenes en movimiento

Hoy te voy a mostrar cómo puedes incorporar texto e imágenes en movimiento en Blogger muy fácilmente.





Hoy te voy a mostrar cómo aplicar este tutorial en Blogger, pero podrías aplicarlo igualmente en tu sitio web esté o no en esta plataforma, para ello simplemente tendrías que colocar el código html que te voy a a proporcionar en el lugar adecuado.

Lo primero por lo que empezaré es por comentarte que al efecto de crear texto en movimiento se le llama marquesina. Te muestro a continuación varios ejemplos para qué veas lo que puedes lograr si aplicas correctamente este tutorial:


¡Hola!
¿cómo estás?

YO FENOMENAL


Comentarte además que podrías también aplicar este mismo efecto a imágenes, te muestro un ejemplo:

Cómo puedes ves las marquesinas en html dan mucho juego y disponen de muchas opciones para la personalización de las mismas... ¡paso ahora ya a indicarte los códigos html correspondientes que has de aplicar!

Pero, antes que nada, recuerda que en Blogger debes de aplicar los códigos que te doy en la pestaña de HTML y no en la de redactar, que es la que utilizas normalmente.

Bien, ahora ya los códigos siguiendo el orden de los ejemplos:

<marquee behavior="scroll" direction="left" height="60" scrollamount="5">¡Hola!</marquee>

<marquee behavior="scroll" direction="right" height="60" scrollamount="8">¿cómo estás?</marquee>

<marquee behavior="scroll" bgcolor="#dcd5de" direction="down" height="60" scrollamount="2"><center><font face=adler color="#ffffff" size=5> YO FENOMENAL </font> </center>
</marquee>

<center><marquee behavior="alternate" direction="right" width="50%"> <img src="http://direccionurldetuimagen.jpg" /> </marquee></center>

Ahora ya paso a explicarte un poco el código para que puedes entenderlo y jugar con las diferentes opciones:

Para el atributo  behavior  he usado dos valores:

scroll (si utilizo este consigo que el texto/imagen aparezca por el lado dcho., por defecto, y se vaya por el lado izdo. de forma continuada)

alternate (si uso este otro obtengo que el texto/imagen digamos que rebote y esté visible continuamente, por lo que ni aparece ni desaparece por ningún lado)

Para el atributo  direction  he tomado los siguientes valores:

left (para que el texto/imagen vaya de izda. a dcha., opción por defecto)

right (para que texto/imagen vaya de dcha. a izda.)

down (para que el texto/imagen vaya de arriba a abajo)

Además con este atributo podrías usar también el valor de up (para que el texto/imagen vaya de abajo a arriba)

Para el atributo  height  he hecho uso de un único valor, 60, pero puedes probar con otros, se refiere a la altura.

El atributo  scrollamount  si que es muy importante, yo he tomado los valores de 5 y 8, puedes probar con otros, lo que conseguirás será modificar la velocidad del texto/imagen.

El atributo  bgcolor  se refiere al color de fondo , puedes elegir el que quieras, te recomiendo visitar este otro post sino sabes muy bien cómo va esto de los colores.

Con la etiqueta  <center>  </center>  lo que hacemos es centrar el texto/imagen, en todo caso puedes suprimirla sino te interesa.

La etiqueta  <font> </font>  recoge dentro de ella todo lo referido a las características propias de la fuente.

El atributo  face  recoge el tipo de fuente, puedes elegir cualquiera de las instaladas en tu ordenador.

El atributo  color  lo que hace es darle el color a la fuente.

El atributo  size  define el tamaño de la fuente.

El atributo  width  se refiere al ancho ocupado, como máximo el 100% para aprovechar todo el espacio.

El atributo  src  recogería la dirección url dónde se encontraría la imagen que deseas usar.

¿Qué te ha parecido el tutorial de hoy?, ¿lioso?,... te aseguro que no tanto aunque pueda parecerlo.

¡Muchas gracias por compartir el post!

Sobre la autora

¡Muchas gracias por tu visita!, si te ha gustado el post no te olvides de comentarlo ni de compartirlo en tus redes sociales ; )

2 comentarios:

  1. Jajajaj, homrre pelín lioso puede que sí. Lo has aplicado genial pero me queda una duda, aunque me da hasta rabia preguntar porque es de bobos. Si pongo el código para que el dibujo salga de derecha a izquierda, que es el que me guata, aparecerá con cualquier imagen que ponga? Hay forma de hacerlo para que solo ocurra alguna vez?
    Si, lo sé, parezco lerda pero es que me cuesta.
    Besos y me encanta este tutorial.

    ResponderEliminar
    Respuestas
    1. Hola !

      El lío viene porque he intentado explicar todo lo que he incorporado para dar más juego... pero verás que en el fondo no es nada complicado.

      Si, valdría para cualquier imagen de la que tengas una url...

      Para que el efecto sólo ocurra una vez no tengo contestación ahora mismo... si se me ocurre algo o lo averiguo te comento, ¿vale?

      Y tranquila, que no eres lerda para nada... probablemente tus preguntas y mis comentarios ayuden a más gente ; )

      Eliminar

Follow my blog with Bloglovin