Question

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

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

＃top-banner div下面是一个带有水线背景图像的div，所需的效果是当用户向下滚动时让水线覆盖＃top-banner，使其看起来好像模型，文字＆amp;背景被水覆盖。

我已经通过使用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);

Answer 1

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

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

即

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

唯一的问题是，使用真正的3D维层，意味着您必须对Z-Index保持智能，以确保您的图层在错误的位置不重叠。

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

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

视差滚动有点跳跃

1 个答案: