鼠标滚动后,视差效果不够顺畅

时间:2017-03-19 19:16:22

标签: javascript css3 background-image parallax

我作为一个庸人来到这里,所以忍受我......

我的页面上有视差滚动效果和平滑滚动。

http://codepen.io/QLCee/pen/BWRMzd

这是我想要做的 http://anagram.paris/team

鼠标滚动后我的视差滚动效果延迟。 当我滚动鼠标时,页面和图像平滑地向下移动。 页面停止移动,但图像仍然移动几毫秒

我还有什么可以尝试的吗?

以下是平滑滚动的代码

$(function(){
var $window = $(window);
var scrollTime = 1;
var scrollDistance = 200;

$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                            
        });
    });
});

这适用于PARALLAX

(function(){
 var parallax = document.querySelectorAll(".parallax"), 
speed = 0.5;

window.onscroll = function(){
[].slice.call(parallax).forEach(function(el,i){

  var windowYOffset = window.pageYOffset,
      elBackgrounPos = "50% " + (windowYOffset * speed) + "px";

  el.style.backgroundPosition = elBackgrounPos;

        });
    };
})();

谢谢

0 个答案:

没有答案