javascript – 视差滚动有点跳跃

我在一个正在工作的网站上有一点点视差,它工作得很好,但是当我向下滚动页面时,前景div有点跳跃.

在页面顶部附近我有一个名为#top-banner的div,它有一个固定的背景图像,坐在这个div中的是另外两个,fisrt div / column有一个模型和图像的图像.第二个div只有文字.

#top-banner div下面是一个带有水线背景图像的div,所需的效果是当用户向下滚动时让水线覆盖#top-banner,使其看起来像模型,文本和放大器;背景被水覆盖.

我已经通过使用jQuery更改css底部属性来使其看起来似乎两个列div在水线下方的页面向下移动,当用户向下滚动页面时以与滚动类似的速度移动.我将速度/增量设置为略有不同,以创建视差效果.

它工作得很好,但有点跳跃,我也尝试使用jQuery动画功能,但这更加神奇.

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评论更新了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);

解决方法:

我曾经以类似的方式构建视差网站,通过使用jquery来调整背景位置或边距,但是,几个月前我读了这篇文章,这真的改变了我接近它们的方式.

他建议使用CSS translateZ和透视图将容器或图像向前和向后移动到三维空间中以创建“真正的”parralax.这会创建更流畅的动画,并在移动设备上呈现更好的效果.我个人也发现这更容易执行.

I.E.

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

唯一的问题是,使用真正的三维图层意味着您必须聪明地使用Z-Index来确保您的图层在错误的位置不重叠.

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

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

标签：jquery,javascript,css,css3,parallax
来源： https://codeday.me/bug/20190703/1363856.html