Прокрутка с плравным наклоном JS throttle и debounce из библиотеки underscore

Для работы скрипта понадобиться библиотека underscore JS

throttle - помогает не вычислять постоянно при скроле, а раз в 16 сек пример:


var skewFunc = throttle(function(skewAngle){ 
$("#content").css("transform","skewY("+skewAngle+"deg)"); 
}, 16); 

debounce - помогает вызвать функцию только один раз если вызывается многократно, вызов происходит в конце


var setStandart = debounce(function(){ 
$("#content").css("transform","skewY(0deg)"); 
},100); 

 

Функция прокрутки окна и вычисления силы скролла, все вместе:


import {throttle,debounce} from 'underscore'

var MAX = 50;
var checkScrollSpeed = (function(settings){
    settings = settings || {};

    var lastPos, newPos, timer, delta, 
        delay = settings.delay || 50; // in "ms" (higher means lower fidelity )

    function clear() {
      lastPos = null;
      delta = 0;
    }

    clear();

    return function(){
      newPos = window.scrollY;
      if ( lastPos != null ){ // && newPos < maxScroll 
        delta = newPos -  lastPos;
      }
      lastPos = newPos;
      clearTimeout(timer);
      timer = setTimeout(clear, delay);
      return delta;
    };
})();

var setSkew = throttle( function(skew){
  $('p').css('transform','skewY('+ skew +'deg)')
}, 16);
var setBack = debounce(function(){
  $('p').css('transform','skewY(0deg)');
}, 100);

$(window).on('scroll',function(){
  var speed = checkScrollSpeed();
  if(speed>MAX) speed = MAX;
  if(speed<-MAX) speed = -MAX;

  setSkew(speed/10);
  setBack();
})