Evento de desplazamiento de la ventana de jQuery. Por cada XX píxeles desplazados

Estoy usando el excelente complemento jQuery Reel (http://jquery.vostrel.cz/reel) para un proyecto. Me gustaría vincularme al evento de desplazamiento de la ventana, de modo que cuando el usuario se desplaza hacia abajo en la página, el complemento avanza 1 cuadro por cada 10 px desplazados, si el usuario se desplaza hacia arriba, la animación se invierte.

El complemento tiene métodos a los que puedo pasar los valores sin problemas y sé cómo enlazar con el evento de desplazamiento de la ventana. Con lo que estoy luchando es con lo último.

¿Cómo puedo usar jQuery/JavaScript para decir que por cada 10 píxeles desplazados en cualquier dirección vertical avance 1 cuadro en la animación? Sé que puedo almacenar el desplazamiento de la ventana en una variable, pero no estoy seguro de cómo decir cada vez que llega a un múltiplo de 10 avanza un cuadro.

Muchas gracias de antemano.

EDITAR

Gracias a la ayuda de los usuarios a continuación, encontré una solución. Como sigue:

$(window).scroll(function()
{
    windowScrollCount   = $(this).scrollTop();
    animationFrame      = Math.round(windowScrollCount / 100);
});

Así que aquí estoy obteniendo la distancia desplazada en windowScrollCount, traduciéndola a fotogramas en animationFrame y volviéndola a configurar con .reel("frame", animationFrame); De hecho, estoy haciendo esto por cada 100 cuadros, ya que cada 10 fue demasiado rápido.

preguntado el 03 de mayo de 12 a las 10:05

3 Respuestas

Gracias a la ayuda de codef0rmer y noShowP encontré una solución. Como sigue:

$(window).scroll(function()
{
    windowScrollCount   = $(this).scrollTop();
    animationFrame      = Math.round(windowScrollCount / 100);
});

Así que aquí estoy obteniendo la distancia desplazada en windowScrollCount, traduciéndola a fotogramas en animationFrame y volviéndola a configurar con .reel("frame", animationFrame); De hecho, estoy haciendo esto por cada 100 cuadros, ya que cada 10 fue demasiado rápido.

contestado el 03 de mayo de 12 a las 14:05

Si me equivoco, es posible que desee esto:

var jump = 500;  // consider this is your 10px 
window.scrollHeight = 0;
$(window).scroll(function () {
   console.log($(this).scrollTop());
   var diff = $(this).scrollTop() - window.scrollHeight;
    if (diff >= jump) {
       window.scrollHeight = $(this).scrollTop();   
       console.log('reload frame');
    }
});   

Demo: http://jsfiddle.net/Dyd6h/

contestado el 03 de mayo de 12 a las 13:05

codef0rmer gracias por su respuesta. Eso no es exactamente lo que quiero, aunque estoy empezando a entender ahora cómo puedo lograrlo. Básicamente, cada vez que scrollTop llega a 10, luego a 20, luego a 30, etc., avanza un cuadro. - monedero

codef0rmer gracias por la ayuda, lo he resuelto, consulte mi respuesta anterior. - monedero

Es posible que tenga un elemento adhesivo en la parte superior de su página,

posición: fija; arriba 0; izquierda: 0;

(oculto si quieres).

Y luego, cuando se desplaza, puede controlar su compensación:

$('element').offset().top

Luego, puede ver qué tan abajo en la página se ha desplazado, de modo que cada vez que se desplazan, vea cuál es su valor superior y active los eventos de manera adecuada.

EDIT:

He configurado un pequeño JSfiddle con un comienzo de lo que creo que necesitas.

http://jsfiddle.net/qJhRz/3/

Solo estoy calculando el marco en el que necesita estar y almacenándolo en una variable. ¿Es algo como lo que estás buscando?

contestado el 03 de mayo de 12 a las 12:05

Gracias por la respuesta, pero eso no es lo que quiero. He actualizado el último párrafo anterior para que el requisito sea más claro. - monedero

Nunca antes había usado el carrete, ¿ya sabe cómo hacer que avance un cuadro y solo necesita saber cómo llamar a esos eventos cada vez que se desplaza 10px? - noShowP

Creo que está en la línea correcta aquí, puedo hacer referencia al recuento de fotogramas en una variable. Simplemente no entendí cómo cuando el scrollTop llega a 10, luego a 20, luego a 30, etc., avanzar un cuadro (o agregar uno a la variable del cuadro). Estoy empezando a entender ahora gracias por la ayuda - monedero

noShowP gracias por la ayuda, lo he resuelto, consulte mi respuesta anterior. - monedero

No te preocupes, parece que has usado mi método, me alegro de que te haya funcionado :) - noShowP

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.