Juan Manuel 25 de junio de 2008 a las 13.00
   Imprimir artículo
elWebmaster.com

Easy Scroll: desplegando el contenido de tu sitio con CSS


Easy Scroll: desplegando el contenido de tu sitio con CSSEasy Scroll v1.0 es un script que te permite generar un desplazamiento en el contenido de tu sitio (scroll) con CSS (y con la ayuda de Javascript). Con él podrás incluir dos “botones”, uno para desplazar hacia arriba y viceversa, que generen un scroll en el texto o contenido de un sector de la página.

Este efecto tan popular en aplicaciones y sitios hechos en Flash ahora está al alcance de tu mano. ¡Sólo tienes que copiar y pegar el código en tu página web!

Desplazando contenido con CSS: Easy Scroll

Cómo funciona:

Al posar el cursor sobre los botones “desplazar hacia arriba” o “…hacia abajo” comenzará automáticamente el scroll. Si cliqueamos sobre ellos duplicaremos la velocidad.

Presionando el botón “reset” dejaremos el texto, imágenes, etc. en su lugar original.

Puedes ver una demo haciendo clic aquí.

La demo sólo contiene texto, pero puede usarse con cualquier cosa ^_^.

Cómo usar CSS Easy Scroll en tu sitio o blog:

Para comenzar, puedes descargar el script. Luego deberás incluir la siguiente línea de código dentro del <head> de tu HTML:

<script type="text/javascript" src="easyscroll/easyscroll.js"></script>

También necesitarás un <div> con un id determinada (por default usaremos “myContent”). Dentro deberá ir el contenido desplazable, obviamente:

<div id="myContent">

 <!-- EN ESTE LUGAR VA TU CONTENIDO -->

</div>

¡Aunque no lo creas, eso es todo lo que hay que hacer con markup!

El script se encarga de seguir desde aquí, generando un div con el id=”easyscroll”, donde incluye todo el contenido, acomodando los botones, etc.

Seteando las variables en Javascript

Dentro de los archivos descargados encontrarás uno llamado easyscroll.js, que incluye estas variables configurables:

var id = "myContent";

Esta variable es la que nombramos en el <div> del HTML. Puedes cambiarla si lo has hecho antes.

var nav = ["Scroll Up", "Scroll Down", "Reset"];

Este es el texto que aparece en cada botón (supongo que no querrás dejarlo en inglés ^_^).

var navId = ["btnUp", "btnDown", "btnReset"];

Estas ids son opcionales, una para cada botón, por si quieres cambiar su apariencia con CSS.

var speed = 5;

Obviamente, el número marca la velocidad del desplazamiento (mayor múmero = mayor velocidad).

var height = 200;

Altura deseada para el área desplazable.

Usa más CSS para personalizar todo el contenido dentro del div.

Fantástico ¿no?

Fuente: CSS Globe


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (1)

  1. Antón dice:

    Hay algún modo de hacer varios easyscroll juntos?

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder