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

您可以在此頁面上下載並找到所有參數和選項