Texto e Imágenes Deslizables y Animados (Tutorial)

Es muy fácil hacer que tu texto se desplace de un lado para el otro horizontalmente o también verticalmente, para esto no necesitas un widget o un gadget ya que lo puedes hacer solo con la Etiqueta <Marquee>, que te puede dar grandes efectos de animación para tu pagina web o blog.

Pruébalo:

Entra ya a
W3 Tricks - Tu Sitio de Trucos Web


Código:

<marquee direction="up" style="border: thin solid rgb(0, 0, 0); height: 200px; width: 200px;"><center>Entra ya a <br /><a href="http://trucosw3.blogspot.com/">W3 Tricks - Tu Sitio de Trucos Web</a><br />
<a href="http://trucosw3.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAZtRQnZ0sDNrHwe4gXBY7toN6bjciZNc3FhjY-1ddoha51qGhpNn5nb6QrQa4TcK4EfDCh60IPd4PHHEF0vAmZEYP2RHoRVSzT4d9LcBM1O0VISN4-7Mhef3MnLI2vbY_TofNza4MJtoW/s1600/w3tricks2p.gif" title="Entra ya" />
</a></center>
</marquee>

Tutorial:

<marquee direction="up"
//Marquilla con dirección hacia arriba, puede cambiar la dirección usando estas palabras: Up arriba, Down abajo, Left Izquierda, Rigth Derecha

style="border: thin solid rgb(0, 0, 0);
//estilo, en este caso con un borde solido de color negro

 height: 200px; width: 200px;"
//Height es Altura, Width es Ancho

<center>Entra ya a <br /><a href="http://trucosw3.blogspot.com/">W3 Tricks - Tu Sitio de Trucos Web</a>  

//<center> para que quede centrado, como puedes ver se pueden usar enlaces <a href=...

<br />   

// usa enteres para que se vea bien el texto

<a href="http://trucosw3.blogspot.com/">

<img border="0" src="http://urldirecciondelaimagen" title="Entra ya" /> 

// puedes agregar imágenes también con la etiqueta <img> cambiando la fuente de la imagen en src

</a></center></marquee> 

// fin del código

En el siguiente ejemplo puedes ver una Marquilla en la cual esta modificado la velocidad de la animación y ademas si le pasas el mouse se detiene.

Pruébalo 2:

W3 Tricks - Tu Sitio de Trucos Web

Código 2:

<marquee direction="right"  scrollamount="5" onmouseover="this.stop();" onmouseout="this.start();"><a href="http://trucosw3.blogspot.com/">W3 Tricks - Tu Sitio de Trucos Web</a></marquee>

Tutorial 2:
<marquee direction="right"
//una nueva marquilla, en este caso sin estilo para el tamaño o borde, la dirección en este caso hacia la derecha

scrollamount="5"
//velocidad de la animación, entre mas alto el número mas rápido viaja el texto

onmouseover="this.stop();" onmouseout="this.start();">
//cuando tiene el mouse encima se detiene, cuando se quita el mouse vuelve a moverse

<a href="http://trucosw3.blogspot.com/">W3 Tricks - Tu Sitio de Trucos Web</a></marquee>
//otra vez agregamos un enlace y cerramos la marquilla.

Espero que estos 2 ejemplos te hallan ayudado y que lo puedas usar en tu página web o blog.