jQuery-背景图像的视差效果

Question

好的，所以我的站点上有一个div类作为“部分”。 我给它的背景图片与以下CSS：

.section-one {
    width: 100vw;
    height: 100vh;
    background-image: url(images/outside-shot-edited.png);
    background-position: center;
    background-size: cover;
}

并希望对其施加视差效果，以便在用户滚动时，图像滚动但速度较慢。

是否可以使用jQuery为使用background-image的div做到这一点？

我不想让事情变得太复杂，而只是希望给网站增加一些动态变化。

欢迎任何建议，我尝试了以下方法，但没有用...

function parallax(){
    var scrolled = $(window).scrollTop();
    $('.section-one').css('top', -(scrolled * 0.5) + 'px');
}



$(window).scroll(function(e){
    parallax();
});

Answer 1

尝试使用translate属性

function parallax(){
var scrolled = $(window).scrollTop();
$('.section-one').css({'transform':'translate(0px,'+scrolled /2+'%'});
}



$(window).scroll(function(e){
    parallax();
});

只需将滚动的/ 2数字更改为适合您需要的任何数字

Answer 2

您可以使用易于实现的parallax.js ，只需将class parallax-window添加到div和其他数据参数中

<div class="parallax-window" data-parallax="scroll" data-image-src="/path/to/image.jpg">
</div>

或使用jQuery

$('.parallax-window').parallax({imageSrc: '/path/to/image.jpg'});

您可以在此页面上下载并找到所有参数和选项