平滑的视差效果

Question

我正在尝试制作视差效果。是的，我知道有现成的解决方案，但出于自学的目的，我决定从头开始写这个，并使用 "plain" js（没有 jq）。所以我遇到了这样的问题，即我通过 js 处理的 "layers"，摇晃，它只在我用鼠标滚轮滚动页面时出现。使用滚动条的手动滚动效果很好。我使用此代码进行图层更新：

window.onscroll = function () {
    requestAnimFrame(scrollCalc);
}

scrollCalc = function() {
    for (var i = 0; i < parallaxes.length; i++) {
        var offset = (parallaxParents[i].getBoundingClientRect().top) * (-1) * parallaxes[i].magnitude;
        parallaxes[i].style.transform = "translate3d(0, " + offset + "px, 0)";
    }
}

requestAnimFrame = (
    window.requestAnimationFrame       ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame    ||
    window.oRequestAnimationFrame      ||
    window.msRequestAnimationFrame     ||
    function(callback) {
        setTimeout(callback, 1000 / 60);
    }
);

parallaxParents 变量存储父 dom 视差层元素，parallaxes 变量存储视差层本身。

PS：我在 chrome 上看到的那些抖动，firefox 有微延迟。我相信这两个细微差别的根本原因可以在同一期中涵盖。

抱歉我的英语不好

Answer 1

已经解决。我已经以这种方式覆盖了默认的鼠标滚轮功能。

    window.onmousewheel = function (e) {
        e.preventDefault();
        window.scrollTo(window.pageXOffset + e.deltaX/scrollRatio, window.pageYOffset + e.deltaY/scrollRatio)
    }

也许这不是最好的解决方案，但效果很好。滚动条上的抖动消失了。

平滑的视差效果

Smooth parallax effect

javascript

parallax