Easy 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
Comentarios recientes
- Justi: tal cual lo que dijo HurryCrack, es muy probable que sea por los permiso...
- Justi: sip, se puede power...
- Justi: es porque hay un error en los operadores logicos, ahi lo arreglo, es con...
- Justi: el taller no incluye la parte de OOP....
- Justi: que no te sale?...
- Justi: hola, si no pude contestar un comentario, fue porque no he tenido mucho ...
Feed de los comentarios