aScroller: Un script para desplazar contenidos

Este script de Argilla es una forma de reemplazar las MARQUEES de manera sencilla y funciona en la mayoría de las versiones de Internet Explorer, Firefox, Safari y Opera.

Lo primero que debemos hacer es descargar el archivo y agregarlo en la plantilla antes de </head>; ya sea alojándolo en un servidor propio:

<script src='URL_aScroller-1.0.js' type='text/javascript'></script>

o insertando su contenido entre estas etiquetas:

<script type='text/javascript'>
//<![CDATA[
[ ... el contenido del archivo ...]
//]]>
</script>

Para utilizarlo, debemos definir un DIV al que le daremos un nombre único, con el atributo ID y adentro de este, colocaremos otro DIV donde irá el contenido a ser mostrado. Inmediatemente después, colocaremos la llamada a la función:

divScroller("nombreID", "modo", velocidad, delay);

nombreID el nombre del DIV
modo "h" para un scroll horizontal y "v" para un scroll vertical
velocidad de desplazamiento (a valores más altos, menor velocidad)
delay demora entre mensajes cuando es vertical (en microsegundos)

Un ejemplo de scroll horizontal:

<div id="sDemo1" style="height: alturapx; width: anchopx;">
<div>....... aquí va el contenido a mostrar .......</div>
</div>
<script type="text/javascript">divScroller("sDemo1", "h", 20, 3000);</script>

Dentro del atributo STYLE, debemos colocar, obligatoriamente, el ancho y el alto del elemento pero, podemos agregar otras propiedades como colores y fuentes.

<div style="background:transparent url(imagenFONDO) no-repeat 50% 50%;width:100%;height:50px;"><div id="scrollDemo2" style="color:#FFFFFF;font-size:20px;height:50px;line-height:50px;margin:0 auto;width:400px;"><div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit ...</div></div><script type="text/javascript">divScroller("scrollDemo2", "h", 20, 1000);</script></div>

El modo "vertical" fuciona de la misma manera. En este ejemplo, sólo cambiamos "h" por "v".

En los scrolls verticales, es posibile agregar múltiples párrafos. Si ponemos cada uno dentro de un DIV, se mostrarán de manera secuencial:

<div id="scrollDemo3" style="height: 40px; color:#FFFFFF;line-height: 40px; width: 400px;margin:0 auto;text-align:center;font-size:17px;"><div style="background-color:#3E5266;">PARRAFO 1: Lorem ipsum dolor sit amet ...</div><div style="background-color:#4E6276;">PARRAFO 2: Ut wisi enim ad minim veniam ...</div><div style="background-color:#5E7286;">PARRAFO 3: Duis autem vel eum ...</div><div style="background-color:#6E8296;">PARRAFO 4: At vero eros et accumsan ...</div></div><script type="text/javascript">divScroller("scrollDemo3", "v", 20, 3000);</script>

Ambos modelos permiten colocar casi cualquier tipo de contenido dentro de los DIVs así que también es una forma sencilla de crear un slideshow o un blogroll ya que podemos utilizar imágenes o enlaces además de poder establecer estilos individuales.

El resto, depende de la imaginación.