jquery - down - Cómo hacer que la rueda del mouse se desplace a la sección como en mediafire.com

scroll down jquery

Question

Encontré la página de inicio de este sitio web http://www.mediafire.com/ , en la que cuando mueves la rueda del mouse, la página se coloca automáticamente en la siguiente sección de la página. Me gusta saber cómo se hace. Puede alguien ayudarme con esto. Gracias por adelantado.

Saludos, Aswin

Answer 1

Creo que este tipo de animación es probablemente difícil de aceptar, especialmente alguien nuevo en jQuery. Esto implica desplazarse, capturar los eventos de la rueda del mouse, retrasar las animaciones y, sobre todo, hacer que funcione correctamente en los navegadores cruzados y en los eventos de deslizamiento y toque de los navegadores móviles. Si no tiene una comprensión sólida, le sugiero que use un complemento. Estos dos son los mejores: desplazamiento de una página y página completa .

Solo puedo mostrarle el método básico sobre cómo hacer esto en navegadores cruzados, si desea que funcione correctamente en el móvil, debe hacer su parte y agregar los eventos deslizables y táctiles. :)

//Set each section''s height equals to the window height
$(''section'').height($(window).height());
/*set the class ''active'' to the first element
this will serve as our indicator*/
$(''section'').first().addClass(''active'');
/* handle the mousewheel event together with
DOMMouseScroll to work on cross browser */
$(document).on(''mousewheel DOMMouseScroll'', function (e) {
e.preventDefault();//prevent the default mousewheel scrolling
var active = $(''section.active'');
//get the delta to determine the mousewheel scrol UP and DOWN
var delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1;
//if the delta value is negative, the user is scrolling down
if (delta < 0) {
//mousewheel down handler
next = active.next();
//check if the next section exist and animate the anchoring
if (next.length) {
/*setTimeout is here to prevent the scrolling animation
to jump to the topmost or bottom when
the user scrolled very fast.*/
var timer = setTimeout(function () {
/* animate the scrollTop by passing
the elements offset top value */
$(''body, html'').animate({
scrollTop: next.offset().top
}, ''slow'');
// move the indicator ''active'' class
next.addClass(''active'')
.siblings().removeClass(''active'');
clearTimeout(timer);
}, 800);
}
} else {
//mousewheel up handler
/*similar logic to the mousewheel down handler
except that we are animate the anchoring
to the previous sibling element*/
prev = active.prev();
if (prev.length) {
var timer = setTimeout(function () {
$(''body, html'').animate({
scrollTop: prev.offset().top
}, ''slow'');
prev.addClass(''active'')
.siblings().removeClass(''active'');
clearTimeout(timer);
}, 800);
}
}
});

Aquí hay una demostración: jsfiddle.net/NGj7F/