JMiur [E]

Easy Scroll es un pequeño script que no utiliza ninguna otra librería adicional y que permite agregar funciones de scroll sencillas en los elementos de un sitio.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent dapibus, purus non tincidunt mattis, odio ipsum euismod ipsum, eget suscipit dui orci vitae urna. Vivamus et ipsum at mauris interdum dapibus. Morbi lectus. Quisque id ante commodo nulla eleifend posuere. Donec quis augue sit amet neque mollis ornare. Nam gravida rhoncus velit. In magna. Nulla semper tristique elit. Aenean euismod. Maecenas nunc sapien, nonummy vel, nonummy in, ultrices tristique, odio.

Phasellus bibendum. Cras accumsan massa venenatis lectus bibendum elementum. Nulla id justo. Nunc ante nisl, rhoncus vel, ultrices at, consequat ut, nunc. Vestibulum dolor. Aenean elementum malesuada elit. Mauris turpis. Morbi vel nulla. Fusce sit amet quam. Etiam vel diam. Praesent tortor. Nulla nisi arcu, nonummy at, dignissim at, elementum ut, leo. Nunc odio nibh, cursus vitae, ultricies et, blandit et, leo.

Nulla velit velit, vehicula sit amet, tincidunt non, nonummy semper, massa. Cras accumsan. Nulla faucibus lorem ut metus. Nulla felis lectus, tristique a, dapibus ut, pharetra a, nunc. Ut egestas. Sed posuere rhoncus turpis. Vivamus posuere, augue ac viverra blandit, metus dolor malesuada neque, eget elementum ipsum pede at pede. Vivamus elit metus, vehicula eget, consequat in, sodales nec, diam. Vestibulum eu mauris. Sed sodales mi eu augue. Mauris sagittis hendrerit ipsum. Pellentesque sodales. Duis ligula turpis, commodo nec, adipiscing eu, pretium id, eros. Maecenas tellus nisi, dapibus lobortis, suscipit eget, consequat vitae, eros. Nunc cursus fringilla nisi. Morbi pharetra, ipsum vel imperdiet elementum, sapien augue adipiscing magna, vitae tempus sapien sapien sit amet magna. Fusce diam tortor, fermentum non, sollicitudin id, feugiat ac, felis. Maecenas accumsan velit at risus. Proin in augue ut lacus auctor eleifend. Duis lectus.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent dapibus, purus non tincidunt mattis, odio ipsum euismod ipsum, eget suscipit dui orci vitae urna. Vivamus et ipsum at mauris interdum dapibus. Morbi lectus. Quisque id ante commodo nulla eleifend posuere. Donec quis augue sit amet neque mollis ornare. Nam gravida rhoncus velit. In magna. Nulla semper tristique elit. Aenean euismod. Maecenas nunc sapien, nonummy vel, nonummy in, ultrices tristique, odio.

Phasellus bibendum. Cras accumsan massa venenatis lectus bibendum elementum. Nulla id justo. Nunc ante nisl, rhoncus vel, ultrices at, consequat ut, nunc. Vestibulum dolor. Aenean elementum malesuada elit. Mauris turpis. Morbi vel nulla. Fusce sit amet quam. Etiam vel diam. Praesent tortor. Nulla nisi arcu, nonummy at, dignissim at, elementum ut, leo. Nunc odio nibh, cursus vitae, ultricies et, blandit et, leo.

Nulla velit velit, vehicula sit amet, tincidunt non, nonummy semper, massa. Cras accumsan. Nulla faucibus lorem ut metus. Nulla felis lectus, tristique a, dapibus ut, pharetra a, nunc. Ut egestas. Sed posuere rhoncus turpis. Vivamus posuere, augue ac viverra blandit, metus dolor malesuada neque, eget elementum ipsum pede at pede. Vivamus elit metus, vehicula eget, consequat in, sodales nec, diam. Vestibulum eu mauris. Sed sodales mi eu augue. Mauris sagittis hendrerit ipsum. Pellentesque sodales. Duis ligula turpis, commodo nec, adipiscing eu, pretium id, eros. Maecenas tellus nisi, dapibus lobortis, suscipit eget, consequat vitae, eros. Nunc cursus fringilla nisi. Morbi pharetra, ipsum vel imperdiet elementum, sapien augue adipiscing magna, vitae tempus sapien sapien sit amet magna. Fusce diam tortor, fermentum non, sollicitudin id, feugiat ac, felis. Maecenas accumsan velit at risus. Proin in augue ut lacus auctor eleifend. Duis lectus.


Para utilizarla, debemos descargar el ZIP y alojar el archivo JS en un servidor propio y luego, insertarlo la plantilla, justo antes de </head>:
<script type="text/javascript" src="URL_easyscroll.js"></script>
Ahora, sólo necesitamos crear un DIV y allí, colocar el contenido:
<div id="myContent">
[... el contenido ...]
</div>
Eso es todo.

Ahora bien, si queremos personalizar un poco las cosas, el script contiene algunas variables que podemos modificar:

var id = "myContent"; es el nombre del DIV.
var nav = ["Scroll Up", "Scroll Down", "Reset"]; son los textos que aparecerán debajo de cada botón.
var navId = ["btnUp", "btnDown", "btnReset"]; son IDs opcionales para los botones en el caso de querer aplicar propiedades CSS a cada uno de ellos.
var speed = 5; es la velocidad de desplazamiento (a mayor valor, mayor velocidad). Cuando se pasa el ratón sobre el botón, comienza el scroll y al hacer click en ellos, la velocidad se duplica.
var height = 200; es la altura del área.

Las propiedades CSS que podemos utilizar para controlar la salida se refieren, básicamente a estos elementos:
<style type="text/css">
#easyscroll { /* es el bloque visible */
[ ... background border margin width ... ]
}

#easyscrollnav, #easyscrollnav li { /* son los pseudo-botones */
margin: 0;
padding: 0;
}

#easyscrollnav { /* es el área donde se muestran los pseudo-botones */
margin: 0;
padding: 0;
}

#easyscrollnav li { /* cada uno de los pseudo-botones */
[ ... background color margin ... ]
cursor: pointer;
float: left;
list-style-type: none;
}

#easyscrollnav li.over { /* efecto rollover sobre los pseudo-botones */
[ ... ]
}</style>

16 comentarios:

Charles_Blake  

Tu aporte es realmente excelente. Te felicito

Responder
SpamLoco  

Está muy bueno el scroll, es curioso, recién entre y mientras se cargaba el archivo JS, se veía todo el texto de forma normal, luego cuando cargó el archivo apareció el scroll.

Es lógico, pero me pareció curioso.

:D

Responder
solrac  

muy buen script JM ;) y de utilidad :)


Solo una cosita, tiene un pequeño problema, no detecta el fin del scroll up & down, o sea, sigue subiendo o bajando indefinidamente.

Responder
JMiur  

Es verdad, es un script que podría mejorarse mucho y ser más flexible.

Responder
Gem@  

Y modificar la velocidad porque baja muy bien pero sube que es gloria :D

Responder
JMiur  

Es que siempre es más fácil ir cuesta abajo que cuesta arriba :D

Responder
solrac  

... es lo que tiene la gravedad :)

Responder
Gem@  

jajajaja sois tremendos :D

Responder
JMiur  

La culpa de todo la tiene Newton; si él no hubiera inventado esto de la gravedad, la vida seria más sencilla :X

Responder
NKR  

Te doy toda la razón JMiur. Estos americanos (los del norte, debajo de los grandes lagos)no saben que hacer para jodernos la vida.
Mientras tanto cojo el scrollfacil prestado una "temporadita".
Saludos.

Responder
JMiur  

Todo suyo :D

Responder
Uno mas del monton  

Muy bueno, tiene un bug si lo pongo en velocidad 2 o 1 no sube, sino ke con el botón de subir baja mas lento y al hacerle click sube pero muy lento.
¿¿Se le podrá agregar una barra lateral para controlar ??

ejemplo:http://musicaconletra.com.ar/2010/08/seguimos-en-pie-ska-p.html

Responder
JMiur  

Eso lo desconozco.

Responder
Uno mas del monton  

ahi se arreglo, le cambié la caja y ahora anda bien, =), no tenía nada ke ver la velocidad.
En un momento habia puesto el efecto tipo rebote ese ke tenes cuando apretas Scroll up y no hay mas para subir ¿como se hace?

Y ya ke esta te kería compartir con vos la idea de un reproductor de LRC online, sería genial poderlo hacer en blogger, por ahi a vos te resulta fácil yo no tengo idea, pero me sería muy útil. Esto es lo ke encontre hasta ahora:

http://www.caricatos.net/mp3/
http://wonderfl.net/c/dSxy/read
http://movilevolutions.com/aplicaciones/a-176-x-220/lyricshow-player-lee-lo-que-escuchas/
tenia otro enlace muy bueno pero no logro encontrarlo :(

Saludos y gracias!!

Responder
JMiur  

Por lo que veo, eso requiere PHP así que en Blogger no sería posible usarlo pero, igual me fijo :)

Responder
Uno mas del monton  

Al final no me resultó muy útil ya ke no se puede tener cargado mas de uno a la vez, asi ke la cajita con scroll: overflow por ahora es lo ke mejor me funciona..
saludos

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR