Micaela
23 de Diciembre de 2009 a las 09.00
Imaginen que encuentran un genial sitio en el que se utiliza scroll horizontal, es algo creativo, pero desalentador cuando notamos que la rueda de nuestro mouse es completamente obsoleta para navegar por la web.
ScrollSide es un plugin que haciendo hijacking de la rueda del mouse, permite que cuando el usuario mueva la rueda para arriba el sitio haga scroll para la izquierda y cuando la mueva para abajo haga scroll para la derecha. Fantástico ¿Verdad?
El plugin MooTools
-
/* class begins */
-
var ScrollSide = new Class({
-
-
//implements
-
Implements: [Options,Events],
-
-
//options
-
options: {
-
reset: true,
-
movement: 75 /*,
-
onScrollUp: $empty,
-
onScrollDown: $empty
-
*/
-
},
-
-
//initialization
-
initialize: function(container,options) {
-
//set options
-
this.setOptions(options);
-
this.container = document.id(container);
-
if(this.options.reset) { this.container.scrollTo(0,0); }
-
this.containerWidth = this.container.getScrollSize().x;
-
this.position = this.container.getScroll().x;
-
//add the listener
-
this.addListeners();
-
},
-
-
//listen for scrolling
-
addListeners: function() {
-
/* scroll reset */
-
var scrollContainer = (this.container == document.id(document.body) ? window : this.container);
-
scrollContainer.addEvent('scroll',function() {
-
this.position = this.container.getScroll().x;
-
}.bind(this));
-
/* mousewheeling */
-
this.container.addEvent('mousewheel',function(event) {
-
event.stop();
-
//scroll down/right
-
if(event.wheel <0) {
-
this.fireEvent('onScrollUp',[event]);
-
var pos = this.position + this.options.movement;
-
this.position = (pos <= this.containerWidth ? pos : this.containerWidth);
-
}
-
//scroll up/left
-
else{
-
this.fireEvent('onScrollDown',[event]);
-
var pos = this.position - this.options.movement;
-
this.position = (pos> 0 ? pos : 0);
-
}
-
this.container.scrollTo(this.position,0);
-
}.bind(this));
-
}
-
});
Las opciones para ScrollSide incluyen:
- reset: (por defecto en true) Programa el container en la posición {x:0,y:0} de forma instantánea.
- movement: (por defecto en 75) El número de pixeles a los que hay que hacer scroll en cada movimiento del mouse.
Los eventos para ScrollSide incluyen:
- onScrollUp: Se activa cuando el usuario hace scroll para arriba con la rueda del mouse.
- onScrollDown: Se activa cuando el usuario hace scroll para abajo con la rueda del mouse.
La implementación:
-
var ss = new ScrollSide(document.body);
Fácil, simple y rápido. Si has creado un sitio que hace scroll de izquierda a derecha, DEBES incluir este plugin en tu web.
Fuente: David Walsh Blog
Viernes, 16 de Julio de 2010 a las 08.39
Hola, el tool es muy bueno! Pero el scroll horizontal no puede moverse con "la bolita del ratón" o bien con el "touch" de tabletas gráficas.
En esta web, vemos como funciona un scroll horizontal a través de "bolita ratón", "touch strip de tableta" e incluso con las flechas del teclado!.
http://www.bluevertigo.com.ar/bluevertigo.htm
http://www.clholloway.co.za/#third
Si saben de algún tool en que podamos lograr esa comodidad, les estaré muy agradecida!
Enorabuena por la información compartida!
SofÃa
Domingo, 19 de Septiembre de 2010 a las 13.40
Una aclaración: el código que has puesto primero, el más grande, hay que incluirlo en verdad? y como se implementa?
No consigo hacer que funcione y cualquier ayuda será agradecida