Los desplazamientos de texto nos pueden servir para darle un toque llamativo al blog.
Aunque pocos somos los que usamos estos efectos, es interesante saber como generarlos. Y es por medio de la etiqueta <marquee>.
Este es un texto común desplazándose hacia la izquierda:
<marquee direction="left" scrollamount="2" scrolldelay="2" style="background-color: #EEE; color: #FF8000; border: 8px solid #FFCC00; font-family: Georgia; font-size: 100px; width: 500px; height: 130px; border-radius: 20px; box-shadow: 0 0 20px #CCC;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </marquee>
Personalízalo como desees:
0
Desplazamiento del texto (left/izquierda, right/derecha, up/arriba, down/abajo y behavior="alternate"/alternado)
0
Velocidad del desplazamiento del texto (varia las cifras para aumentar o disminuir la velocidad)
0
Color de fondo
0
Color del texto
0
Tamaño, tipo y color del borde
0
Tipo de letra
0
Tamaño de letra
0
Espacio horizontal para que aparesca el texto
0
Espacio vertical para que aparesca el texto
0
Borde redondeado
0
Sombra del recuadro
Además de todo esto incluido le podrás agregar al texto un enlace: <a href="URL-de-enlace">Enlace</a> o una imagen de fondo: background-image: url(URL-de-tu-imagen);
También podrás colocar dos links para que decidas hacia donde quieres que se desplace:
◄ Hacia la izquierda | Hacia la derecha ►
▲ Hacia arriba | Hacia abajo ▼
<marquee id="ejemplo" direction="left" scrollamount="2" scrolldelay="2" style="background-color: #EEE; color: #FF8000; border: 8px solid #FFCC00; font-family: Georgia; font-size: 20px; width: 500px; height: 25px; border-radius: 20px; box-shadow: 0 0 20px #CCC;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</marquee>
<a href="javascript:void(0);" onclick="getElementById('ejemplo').direction='left';">◄ Hacia la izquierda</a>
<a href="javascript:void(0);" onclick="getElementById('ejemplo').direction='right';">Hacia la derecha ►</a>
<a href="javascript:void(0);" onclick="getElementById('ejemplo').direction='up';">▲ Hacia arriba</a>
<a href="javascript:void(0);" onclick="getElementById('ejemplo').direction='down';">Hacia abajo ▼</a>
Pero no solo con la etiqueta <marquee> podemos desplazar textos sino también imágenes, tablas, videos, etc,.
