Question

好的，所以我有一个div类，在我的网站上充当“部分”。我用以下css给它一个背景图片：

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

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

是否可以使用background-image使用jQuery为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'});

您可以在this page

下载并查找所有参数和选项

jQuery - 背景图像的视差效果

2 个答案: