Skrollr: Плавная прокрутка

Question

Я хотел бы добиться плавной прокрутки при повороте колеса мыши. В настоящее время, когда я делаю один поворот, прокрутка напоминает какой-то прыжок, а анимация - нервная.

Пример такого поведения: http://areaaperta.com/nicescroll/

Может ли это прокрутка быть достигнуто с использованием только skrollr? Если да, то как? Я попытался следующий код

var s = skrollr.init({ 
render: function(data) { 

      //Debugging - Log the current scroll position. 
      console.log(data.curTop); 
     }, 

     smoothScrolling: true, 
     smoothScrollingDuration: 500, 
        easing: { 
      WTF: Math.random, 
      inverted: function(p) { 
       return 1-p; 
      } 
     } 
    }); 

, но это не делает большой разницы. Анимация немного более плавная (т. Е. Слайд слайдов на некоторое время, а затем останавливается), но сама прокрутка по-прежнему нестабильна.

Я бы предпочел решить это с помощью skrollr только так, как я думаю, он подготовлен к нему вместо добавления другого плагина.

Answer 1

Это цитата из Petr Tichy (ihatetomatoes.net):

Для гладкой анимации, анимации дешевых свойств.

Лучший результат, который вы получите, когда вы продолжаете оживлять только дешевые свойства CSS .

• преобразования: масштаб (1.2)
• преобразования: translateX (100px)
• преобразования: поворот (90deg)
• непрозрачности: 0,5

Эти 4 свойства позволят вам изменить размер, положение, вращение и непрозрачность ваших элементов.

Сочетание этих свойств CSS позволит вам создать довольно большое количество идей и даст вам наилучшие результаты.

Если вы сталкиваетесь с отстающими и изменчивыми анимациями прокрутки, передайте анимационный элемент : translateZ (0).

Это позволит продвинуть элемент в составные слои и избавится от отставания .

Answer 2

Попробуйте включить этот сценарий

jQuery(function() { 

     var $window = jQuery(window); 
     var scrollTime = 0.5; 
     var scrollDistance = 150; 


     $window.on("mousewheel DOMMouseScroll", function (event) { 

      event.preventDefault(); 

      var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3; 
      var scrollTop = $window.scrollTop(); 
      var finalScroll = scrollTop - parseInt(delta * scrollDistance); 

      TweenMax.to($window, scrollTime, { 
       scrollTo: { 
        y: finalScroll, 
        autoKill: true 
       }, 
       ease: Power1.easeOut, 
       overwrite: 5 
      }); 

     }); 

    }); 

Answer 3

У меня была эта проблема также (с Chrome на Mac)

Я решил этим плагином: https://github.com/simov/simplr-smoothscroll

<!-- After jQuery --> 
<script src="jquery.mousewheel.min.js"></script> 
<script src="jquery.simplr.smoothscroll.min.js"></script> 
<script type="text/javascript">$.srSmoothscroll();</script>