jQuery 在窗口滚动动画背景图像位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5001447/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery on window scroll animate background image position
提问by mtwallet
I am trying to achieve a scrolling effect using jQuery. I have a background div set to 100% browser window size with overflow hidden. This has a large background image that is approx. 1500px x 2000px.
我正在尝试使用 jQuery 实现滚动效果。我有一个背景 div 设置为 100% 浏览器窗口大小，溢出隐藏。这有一个大的背景图像，大约是。1500 像素 x 2000 像素。
The effect I want is when the user scrolls down the page the background image moves at a percentage of the scrolled distance, so for every 200px scrolled down the page the image moves 10px in the same direction.
我想要的效果是当用户向下滚动页面时，背景图像以滚动距离的百分比移动，因此对于页面向下滚动 200 像素，图像向同一方向移动 10 像素。
Can anyone point me in the right direction? Is this even possible? : ) Many thanks in advance.
任何人都可以指出我正确的方向吗？这甚至可能吗？： ） 提前谢谢了。
UPDATE
更新
I have since tried variations on the suggestion by @Capt Otis but I'm still struggling the code I am playing around with is as follows:
从那以后，我尝试了@Capt Otis 建议的变体，但我仍在苦苦挣扎，我正在使用的代码如下：
$(window).scroll(function(){
if($(this).scrollTop() > 200) {
$('#div').animate({'background-postion': '+=10px 0'}, 500);
}
});
Can anyone shed any light on what I am doing wrong?
任何人都可以阐明我做错了什么吗？
回答by Hussein
Here you go. Background is set to 10% scroll. You can change the background scroll rate by changing the 10 in the code.
干得好。背景设置为 10% 滚动。您可以通过更改代码中的 10 来更改背景滚动率。
CSS
CSS
html, body{
height:100%;
min-height:100%;
margin:0;
padding:0;
}
.bg{
width:100%;
height:100%;
background: #fff url(..) no-repeat fixed 0 0;
overflow:auto;
}
<div class="bg">
<span>..</span>
</div>
JavaScript
JavaScript
$('.bg').scroll(function() {
var x = $(this).scrollTop();
$(this).css('background-position', '0% ' + parseInt(-x / 10) + 'px');
});
Check working example at http://jsfiddle.net/Vbtts/
Click this link for the full screen example: http://jsfiddle.net/Vbtts/embedded/result/
在http://jsfiddle.net/Vbtts/检查工作示例
单击此链接查看全屏示例：http: //jsfiddle.net/Vbtts/embedded/result/
回答by breez
If you don't want to be hassled with the extra background div, here's my code I wrapped up from several examples:
如果你不想被额外的背景 div 所困扰，这里是我从几个例子中总结出来的代码：
$(window).scroll(function () {
setBackgroundPosition();
})
$(window).resize(function() {
setBackgroundPosition();
});
function setBackgroundPosition(){
$("body").css('background-position', "-" + (1920 - $(window).width()) / 2 + "px " + -(Math.max(document.body.scrollTop, document.documentElement.scrollTop) / 4) + "px");
}
The Math.max is required for cross-browser issues. Also replace '1920' with the width of your background image
Math.max 是跨浏览器问题所必需的。也用背景图片的宽度替换“1920”
body{
background-image:url(images/background.jpg);
background-position:center top;
background-repeat:no-repeat;
background-attachment:fixed;
}
回答by stormwild
This worked for me:
这对我有用：
In js:
在js中：
$(window).scroll(function() {
var x = $(this).scrollTop();
$('#main').css('background-position', '100% ' + parseInt(-x / 1) + 'px' + ', 0% ' + parseInt(-x / 2) + 'px, center top');
});
In css:
在 CSS 中：
#main {
background: url(../img/img1.png) center top no-repeat, url(../img/img2.png) center top no-repeat, url(../img/img3.png);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: right top, left top, center top;
Where #main is the div whose background image I wanted to move. No need to have height: 100% for html, body.
#main 是我想要移动其背景图像的 div。无需高度：100% 用于 html、body。
This is a variation for multiple background images.
这是多个背景图像的变体。
回答by Gareth
This might do it:
这可能会做到：
$(window).scroll(function(){
$('#div').css("background-position",parseInt($(this).scrollTop()*0.05));
})
回答by Capt Otis
Look hereto see an example of how far the user has scrolled on the page. See the $(this).scrollTop()?
查看此处查看用户在页面上滚动多远的示例。看到了$(this).scrollTop()吗？
Rather than referencing $(this), try using the background div. Then use a .scroll function to determine how much to move the background.
与其引用 $(this)，不如尝试使用背景 div。然后使用 .scroll 函数来确定移动背景的程度。
Your code should look something sort of like this:
你的代码应该看起来像这样：
$("html").scroll(function{
var move["bottom"] = $("bg_div").scrollTop();
$("bg_div").animate({bottom: move}, 500);
});
回答by Cokegod
I don't think you can use += or -= when you have two parts in the CSS. There is something you can do, it is a bit tricky but it works:
当 CSS 中有两个部分时，我认为您不能使用 += 或 -= 。有一些你可以做的事情，它有点棘手，但它有效：
$(window).scroll(function(){
if($(this).scrollTop() > 200) {
var bgpos = $("#div").css("background-position");
var bgposInt = 0;
if(bgpos.indexOf("px")!=-1) {
bgpos = bgpos.substr(bgpos.indexOf("px")+3);
bgposInt = parseInt(bgpos.substr(0, bgpos.indexOf("px")));
}
bgposInt += 10;
$("#div").animate({"background-position": "0 "+bgposInt+"px"}, 500);
}
});
This code gets only the second number from the background-position of the div (the top position), converts it to int, and increases it by 10. Then it just animates the div to the new position.
此代码仅从 div 的背景位置（顶部位置）获取第二个数字，将其转换为 int，并将其增加 10。然后它只是将 div 动画化到新位置。
