down - jquery vertical mousewheel desplazamiento suave

scrolltop jquery

Question

Estoy haciendo un sitio web de paralaje y me gustaría hacer que la página se desplace más suavemente con la rueda del mouse para una mejor experiencia de usuario. El mejor ejemplo que pude obtener fue este sitio web: http://www.milwaukeepolicenews.com/#menu=home-page Sería fantástico si pudiera incluir algo similar en mi sitio web, el desplazamiento vertical suave y la inercia del desplazamiento.

Me di cuenta de que están usando la rueda de jQuery de Brandon Aaron, que es muy ligera, pero soy solo un principiante y no puedo hacerlo funcionar solo.

También noté esto en su mpd-parallax.js:

jQuery(window).mousewheel(function(event, delta, deltaX, deltaY){
        if(delta < 0) page.scrollTop(page.scrollTop() + 65);
        else if(delta > 0) page.scrollTop(page.scrollTop() - 65);
        return false;
    })

¡Gracias!

EDITAR

Estoy casi allí. Eche un vistazo a este violín: http://jsfiddle.net/gmelcul/cZuym/ Solo necesita agregar un método de aceleración para desplazarse como el sitio web de la Policía de Milwaukee.

Answer 1

Aquí hay dos jsfiddles, uno con el script y otro sin él para que pueda comparar:

• con guión
• sin guión

JavaScript utilizando el plugin jQuery mousewheel :

$(document).ready(function() {
    var page = $(''#content'');  // set to the main content of the page   
    $(window).mousewheel(function(event, delta, deltaX, deltaY){
        if (delta < 0) page.scrollTop(page.scrollTop() + 65);
        else if (delta > 0) page.scrollTop(page.scrollTop() - 65);
        return false;
    })
});

Compara los dos. Por lo que puedo decir, el script ralentiza la rueda del mouse, por lo que requiere más giros físicos para desplazarse por la misma distancia que sin el script. Puede sentirse más suave debido a ese desplazamiento más lento (y de hecho puede ser más suave, ya que probablemente sea más fácil para la unidad gráfica).

Answer 2

Echa un vistazo a skrollr . Es un complemento para crear el efecto de paralaje. Tiene opciones cuando inicializa el complemento para alternar el desplazamiento suave:

var s = skrollr.init({
    smoothScrolling: true,
    smoothScrollingDuration: 1800
});

Answer 3

Encontré este complemento, tiene algunas opciones agradables y funciona en todos los dispositivos principales http://areaaperta.com/nicescroll/

Answer 4

Hey, tengo otro recurso aquí, que es muy fácil de usar smoothwheel

¡Permite una animación de desplazamiento suave en cada rueda y funciona perfectamente!

Answer 5

Sé que es una publicación muy antigua, pero esta es una buena solución que hice:

function handle(delta) {
    var animationInterval = 20; //lower is faster
  var scrollSpeed = 20; //lower is faster

    if (end == null) {
    end = $(window).scrollTop();
  }
  end -= 20 * delta;
  goUp = delta > 0;

  if (interval == null) {
    interval = setInterval(function () {
      var scrollTop = $(window).scrollTop();
      var step = Math.round((end - scrollTop) / scrollSpeed);
      if (scrollTop <= 0 || 
          scrollTop >= $(window).prop("scrollHeight") - $(window).height() ||
          goUp && step > -1 || 
          !goUp && step < 1 ) {
        clearInterval(interval);
        interval = null;
        end = null;
      }
      $(window).scrollTop(scrollTop + step );
    }, animationInterval);
  }
}

Pruébelo: http://jsfiddle.net/y4swj2ts/3/