Seguro que en alguna ocasión habéis necesitado mostrar información en una web o blog de una forma dinámica, ese típico efecto de movimiento hacia abajo que muestra diferentes anuncios en un mismo cajón. Con jScroller, basado en jQuery y creado por Markus Bordihn, conseguiremos hacerlo fácilmente, pudiendo mostrar la información moviéndose hacia abajo, arriba, izquierda o derecha. Aquí podéis ver la DEMO que he hecho para el ejemplo de a continuación.
El primer paso que haremos será crear una carpeta con el nombre jScroller dentro de la cual hacemos otra de nombre js. Ahora nos descargamos las dos librerías necesarias para hacer funcionar el ejemplo, jScroller (la web ya no funciona) y jQuery (si alguna de las dos descargas da problemas usar la opción picar botón derecho sobre el enlace y «guardar enlace como») y las guardamos en la carpeta js. Seguido creamos un documento .html (yo lo he llamado jScroller) y otro .css (jscroller en mi caso) guardando ambos en la carpeta jScroller.
Abrimos nuestro archivo .html y llamamos a la hoja de estilos y las dos librerías:
[html]
[/html]
Entre las etiquetas body /body hacemos esta estructura:
[html]
Lorem ipsum vel aliquid aliquam ex, ad vis vituperatoribus soluta, mei in quas ferri adipiscing. Cum verear vituperatoribus luptatum eu, adhuc intellegam ne est. Ne solet intellegam ius, eos id vide wisi ubique, soleat tractatos vulputate eu mea. Semper voluptatum assueverit quo ea, et sit porro tollit consectetuer.
[/html]
Finalmente abrimos nuestro .css y añadimos estas líneas:
[css]
#scroller_container {
position: relative;
width: 100px;
height: 200px;
overflow: hidden;}
#scroller {
width: 100px;
position: absolute;
left:0;
top:0;}
#scroller p {
padding: 1px;
margin: 0;
text-align: center;}
[/css]
Si queremos cambiar el ancho o alto del cajón variamos las propiedades width o height. También podemos variar la velocidad a la que pasará la información dentro del cajón y en que dirección se mostrará, para lo que abriremos jscroller.js, modificando la línea direction (down, right, left o up) indicamos como se moverá la información (abajo, derecha, izquierda o arriba) y cambiando el numero de refresh modificaremos la velocidad.
Enlace: jScroller a Autoscroller for jQuery by Markus Bordihn (la web ya no funciona)
