Muchas veces, las personas que nos dedicamos al diseño y desarrollo de sitios web, nos encontramos en la situación de que tenemos que colocar determinado contenido pero este no cabe en el espacio que está destinado para ese fin. Que hacer en ese caso?

Hoy navegando por la red, encontré una manera bastante simple y elegante de poner cualquier tipo de contenido (y de cualquier tamaño) dentro de una caja y visualizarlo mediante dos controles (hacia arriba y hacia abajo) que mueven el contenido con un vistoso efecto scroll.

Se trata de una pequeña librería gratuita Javascript (utiliza jQuery) totalmente personalizable que podemos implementar en cualquier sitio web en tan solo unos pocos minutos.

Para utilizarla debemos hacer lo siguiente:

1. Descargamos la librería desde el sitio del autor.
2. Descomprimimos los archivos (están en formato .zip) y lo subimos a una carpeta en nuestro servidor.
3. Incluímos la librería llamándola desde el header de la página en donde la vamos a utilizar (<script type=”text/javascript” src=”easyscroll/easyscroll.js”></script>). En este punto tenemos que poner correctamente la url en donde subimos la librería. Ejemplo, si subimos la librería a la carpeta librerias/javascript en nuestro servidor, tenemos que llamarla de esta manera: <script type=”text/javascript” src=”librerias/javascripteasyscroll/easyscroll.js”></script>
4. Luego creamos el div en donde vamos a poner el contenido poniendole como ID=”myContent”. Por ejemplo:<div id=”myContent”>
   <!– YOUR CONTENT HERE –>
   </div>

De esta manera, todo el contenido que agreguemos dentro de cualquier div que tenga ese ID va a tener el efecto de scroll.

También podemos personalizar su apariencia mediante CSS y editar algunos parametros del archivo Javascript como:

1. var id = “myContent”; modifica el nombre del ID.
2. var nav = ["Scroll Up", "Scroll Down", "Reset"]; cambia el texto que aparece en los botones de control.
3. var navId = ["btnUp", "btnDown", "btnReset"]; ID opcionales para los botones en el caso de querer aplicarle algún estilo mediante CSS.
4. var speed = 5; velocidad de movimiento del efecto scroll
5. var height = 200; tamaño de la caja

Enlace: Easy Scroll
Demo: Easy Scroll
Descarga: Easy Scroll
Vía: Diario THC