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 de tu HTML:
También necesitarás un
¡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
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?
(O ME AVISAN QUE LO TENGO EN MI PC)
