背景图像的视差效果

jQuery - Parallax Effect for background image

本文关键字：视差 图像 背景      更新时间：2023-09-26

好的，所以我有一个div类，作为一个'节'在我的网站。我给了它一个背景图像与以下css:

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

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

是否可以使用jQuery为div使用background-image ?

我不想要太复杂的东西，只是想给网站增加一点动态的运动。

欢迎任何建议，我已经尝试了以下，但它没有工作…

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

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

尝试使用translate属性

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

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

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

你可以使用parallax.js，它很容易实现只需将类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'});

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

相关文章：