jScroller autoscroll
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 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:
Entre las etiquetas body /body hacemos esta estructura:
-
<div id="scroller_container">
-
<div id="scroller">
-
<p>Lorem <a href="#">ipsum</a> 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.</p>
-
</div>
-
</div>
Finalmente abrimos nuestro .css y añadimos estas lÃneas:
-
#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;}
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
Posts relacionados
2 Comentarios
Dejar un comentario
Hi,
just for Info there is a new Version with a lot more features and which dont require jQuery anymore
Greetings,
- Markus
[...] creador de jScroller, script para mostrar contenido de forma dinámica en un cajón del que hay un tutorial aquà mismo, para comentarme que acaba de lanzar nueva versión del mismo, la cual ya no necesita jQuery y se [...]