我作为一个庸人来到这里,所以忍受我......
我的页面上有视差滚动效果和平滑滚动。
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;
});
};
})();
谢谢