Easy Scroll : Vagabundia

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.

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>

11 comentarios:

Charles_Blake: Tu aporte es realmente excelente. Te felicito; 1:38 AM
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; 3:58 AM
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.; 5:55 AM
JMiur: Es verdad, es un script que podría mejorarse mucho y ser más flexible.; 2:38 PM
Gem@: Y modificar la velocidad porque baja muy bien pero sube que es gloria :D; 9:54 PM
JMiur: Es que siempre es más fácil ir cuesta abajo que cuesta arriba :D; 12:05 AM
solrac: ... es lo que tiene la gravedad :); 7:10 AM
Gem@: jajajaja sois tremendos :D; 12:36 PM
JMiur: La culpa de todo la tiene Newton; si él no hubiera inventado esto de la gravedad, la vida seria más sencilla :X; 3:29 PM
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.; 11:48 PM
JMiur: Todo suyo :D; 12:10 AM