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:
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.
<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.
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?
ResponderEliminarSi, lo sé, parezco lerda pero es que me cuesta.
Besos y me encanta este tutorial.
Hola !
EliminarEl 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 ; )
YO QUERRÍA QUE FUESE EL TEXTO COMO UN RÓTULO
ResponderEliminarNo entiendo muy bien a lo que te refieres.... no obstante, en cualquier caso este tutorial que publiqué es como ves para algo muy concreto..
EliminarUn saludo