javascript - 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 数字更改为适合您需要的任何数字