jQuery - 背景图像的视差效果答案

【问题标题】：jQuery - Parallax Effect for background imagejQuery - 背景图像的视差效果
【发布时间】：2015-09-18 13:46:50
【问题描述】：

好的，所以我有一个 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();
});

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

尝试使用translate 属性

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



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

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

【讨论】：

【解决方案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'});

您可以在this page上下载并找到所有参数和选项

【讨论】：