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.Quizás también te interese:
Cómo permitir a tus lectores suscribirse al blog vía email
Cómo crear alertas personalizadas en Google Analytics
Cómo habilitar la opción de suscribirse al blog vía RSS

Fuente: este post proviene de Café largo de ideas, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
Creado:
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Recomendamos