jquery 滚轮3D翻转效果

需要仿一个页面，这个页面的头部banner区域有一个3D翻转。

看了原来的js，不仅压缩了而且看着特别费劲和复杂，最后用jquery重写了个，一开始的想法是希望通过滚轮位移控制翻转，最后参考了源站的方案，首先将位移的增减关联到up和down上，然后通过up和down来判断翻转。

由于不是很会，各种百度搜索，比如学习了如何获取滚轮的位移，如何解除滚轮页面划动的事件避免向下划动的时候页面也跟着划动等等，虽然有些小瑕疵，但是还是可以用的，以后再完善吧。

jQuery(function(){jQuery(".home-trans span:first").css('transform','scale(0.8)');  });
noScroll = (e) => {	e.preventDefault();}; 
window.onwheel = function (e) {    
  var t = this;
  var n = e.deltaY < 0 ? "up" : "down" ;    
  r = document.documentElement.scrollTop || document.body.scrollTop;   
  if (r <=200 ){ window.addEventListener("wheel",noScroll,{passive: false})}      
    jQuery(t).animate({},function(){
      if ("down" === n){        
       jQuery(".home-trans").css({'transform':'rotateX(0deg) scaleX(1.2) scaleY(1.2)','top':'-300px'});
       jQuery(".banner-tittle,.banner-dld").css('opacity','0');   
       window.setTimeout((function() {window.removeEventListener("wheel",noScroll,{passive: false});}), 800);         
      }; 
      if ("up" === n ){       
       jQuery(".home-trans").css({'transform':'rotateX(75deg)','top':'0px'});
       jQuery(".banner-tittle,.banner-dld").css({'opacity':'1'});          
      }          
      });           
};

最终效果如下图所示，将就能用吧！