javascript - 视差滚动有点跳跃

Question

我正在处理的网站上有一点视差，它几乎可以正常工作，但当我向下滚动页面时，前景 div 有点跳动。

在页面顶部附近，我有一个名为#top-banner 的 div，它有一个固定的背景图像，坐在这个 div 中的一行中还有两个，第一个 div/列有一个模型的图像 &第二个 div 只有文本。

#top-banner div 下方是一个带有水线背景图像的 div，所需的效果是在用户向下滚动时让水线覆盖#top-banner，使其看起来好像模型，文字和背景都被水覆盖了。

我通过使用 jQuery 更改 css bottom 属性来使它工作，使两列 div 看起来在页面底部向下移动，速度与用户向下滚动页面时的滚动速度相似。我将速度/增量设置为略有不同以创建视差效果。

它工作得很好，但有点不稳定，我也尝试过使用 jQuery animate 函数，但它更加不稳定。

HTML

<section id="top-banner">
    <div class="row">
        <div class="col-2 prlx-1">
            <img src="model.png"/>
        </div>
        <div class="r-col-2 prlx-2">
            <h3>Lorem Ipsum</h1> 
            <p>More Ipsum</p>
        </div>                            
</section>   

<section id="hp-water-line"></section>

CSS

#hp-top-banner {
  background: url(bg.png);
  height: 600px;
  background-attachment: fixed;
  background-origin: initial;
  background-clip: initial;
  background-size: cover;
  overflow: hidden;
  width: 100%;
  position: relative;
}

#hp-water-line {
  background: url(water-line.png) no-repeat transparent;
  min-height: 92px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  top: -15px;
  background-size: cover;
}

JS

$(document).ready(function(){

    function parallax(){
        var prlx_effect_1= -((window.pageYOffset / 4) *2.25 );
        $('.prlx-1').css({"position": "relative","bottom":prlx_effect_1, "transition": "0s ease-in-out"});
           // jQ('.prlx-1').css({"position": "relative"});
           // jQ('.prlx-1').animate({"bottom":prlx_effect_1},"fast");

        var prlx_effect_2= -(window.pageYOffset / 5 );
        $('.prlx-2').css({"position": "relative","bottom":prlx_effect_2, "transition": "0s ease-in-out"});

    }

    window.addEventListener("scroll", parallax, false);

});

根据 Prinzhorn Comment 更新了 JS

var requestAnimationFrame = window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.oRequestAnimationFrame;

function onScroll() {
    requestAnimationFrame(parallax);
}

function parallax(){
    var prlx_effect_1= +(window.pageYOffset *.7).toFixed(2); // .55 is a good speed but slow
    var prlx_str_1 = "translate3d(0, "+prlx_effect_1+"px, 0)";
    jQ('.prlx-1').css({
        "transform":prlx_str_1,
        "-ms-transform":prlx_str_1,
        "-webkit-transform":prlx_str_1
    });

    var prlx_effect_2= +(window.pageYOffset * 1 ).toFixed(2); // .33 is a good speed but slow
    var prlx_str_2 = "translate3d(0, "+prlx_effect_2+"px, 0)";
    jQ('.prlx-2').css({
        "transform":prlx_str_2,
        "-ms-transform":prlx_str_2,
        "-webkit-transform":prlx_str_2
    });

    requestAnimationFrame(parallax);

}

window.addEventListener("scroll", onScroll, false);

Answer 1

我曾经以类似的方式构建视差网站，通过使用 jquery 来调整背景位置或边距，但是，几个月前我阅读了这篇文章，这确实改变了我处理它们的方式。

他建议使用 CSS translateZ 和 perspective 将容器或图像向前和向后移动到 3 维空间以创建“真实”视差。这会创建更流畅的动画，并在移动设备上呈现得更好。我个人也发现这更容易执行。

即.

.parallax {
    perspective: 1px;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}
.parallax__layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.parallax__layer--base {
    transform: translateZ(0);
}
.parallax__layer--back {
    transform: translateZ(-1px);
}

唯一的问题是，使用真正的 3Dimensional 层意味着您必须巧妙地使用 Z-Index 以确保您的层不会在错误的位置重叠。

这篇文章有一个很好的演示，您可以查看 3D 空间的侧面轮廓，了解图层在 z 轴上的分布情况。只需单击左上角的“调试”按钮即可。

http://keithclark.co.uk/articles/pure-css-parallax-websites/