动态背景滚动 [英] Dynamic Background Scrolling
问题描述
下面是什么，我会提到的链接： http://beckabney.com/test.html
Here's a link to what I'll be referring to: http://beckabney.com/test.html
我有一些麻烦的背景图像的工作我想它喜欢的方式。
I'm having some trouble getting the background image to work the way I'd like it to.
我想根据窗口，它已经在做正确的宽度后台自动调整。如果你让你的小窗口，你会看到在后台与它缩小。
I want the background to auto resize based on the width of the window, which it is already doing correctly. If you make your window smaller you'll see the background shrink with it.
下面是个问题。如果你把你的窗口宽（短），则背景将调整，所以你不能看到背景的顶部了（因为背景是底部定位）去太高。
我希望背景是顶部位置，当你在页面的顶部，当你向下滚动它会慢慢地移动是底部的位置。有点像Android手机的背景时的效果你可以左右移动。当然，请记住，我还是希望背景自动调整大小时，你的窗口小。
Here's the issue. If you make your window wide (short) then the background will resize and go too high so you can't see the top of the background anymore (since the background is bottom positioned). I want the background to be top position when you are at the top of the page, and as you scroll down it will slowly move to be bottom positioned. Sort of like the effect of an Android phone's background when you move left and right. Of course, keep in mind that I still want the background to auto-resize when you make the window smaller.
HTML
<body>
<img src="http://i.imgur.com/6d5Cm.jpg" alt="" class="background" />
<div class="banner">
<img src="http://i.imgur.com/JptsZ.jpg" alt="" />
</div>
<div class="content">
<div class="innerContent">
testing
</div>
</div>
</body>
CSS：
html
{
background-color: #70d4e3;
height: 100%;
}
body
{
height: 100%;
}
.background
{
margin-top: 45px;
width: 100%;
position: fixed;
bottom: 0;
left: 0;
z-index: -9999;
}
.banner
{
margin: 0px auto;
width: 991px;
margin-bottom: -9px;
}
.content
{
background: url("http://i.imgur.com/daRJl.png") no-repeat scroll center center transparent;
height: 889px;
margin: 0 auto;
width: 869px;
}
.innerContent
{
padding: 30px;
}
也许会需要一些JavaScript或jQuery来实现这一目标。
Maybe some javascript or jquery would be needed to achieve this.
推荐答案
好了，这很有趣，非常感谢！
Well, this was fun, thanks!
我希望你不介意我把自由使用百分比，使我的生活有点容易，可能稍微更强大的，因为我可以可靠地使用花车与百分比。剧本
I hope you don't mind me taking the liberty to use percentages to make my life a little bit easier and possibly the script slightly more robust since I can reliably use floats with percentages.
我所做的是使布局，HTML和CSS符合你需要的BG的规则进行适当的动画，他们留在了大致相同的你有什么。
What I did is make the layout, html and css comply with the rules you need for the bg to be animated properly, they stayed largely the same from what you had.
然后，它只是一个搞清楚用右键属性所需的计算找出你从顶部是百分比， * 20 的问题实际上是量的空间'左'由以百分比的背景图像来填充（作为背景高度为80％）。
Then it was just a question of figuring out the calculations needed with the right properties to figure out the percentage you were from the top, the *20 is actually the amount of space 'left' to fill by the background image in percentages (as the background height is 80%).
他们让我感动的计算，以一个函数，所以我可以调用的滚动和窗口大小调整，确保它是在以某种方式修改窗口中的任何事件...
They I moved the calculations to a function so I could call that on scroll and on window resize, making sure it's initiated on any event that modifies the window somehow...
没有做全面的测试，但它工作在Chrome和我累了：P
Didn't do extensive testing but it worked in Chrome and I'm tired :p
我相信这是你在找什么：
I believe this is what you are looking for:
http://jsfiddle.net/sg3s/RSqrw/15/见编辑2
http://jsfiddle.net/sg3s/RSqrw/15/ See edit 2
如果你想这样的其他方式角落找寻只是让页面背景开始在顶部和修改
If you wanted this the other way arround just make the page background start at the top and modify that:
http://jsfiddle.net/sg3s/RSqrw/14/ 见编辑2
编辑：
作为奖励，因为我从来没有真正写入jQuery脚本作为一个插件，我决定将它转换成一个。我想出了应该是易于实施和使用！
As a bonus, and since I had never actually written jquery script as a 'plugin', I decided to convert this into one. What I came up with should be easy to implement and use!
http://jsfiddle.net/sg3s/RSqrw/52/ 请参阅编辑3
http://jsfiddle.net/sg3s/RSqrw/52/ See Edit 3
功能在Chrome，火狐3.6测试成功，IE9 +兼容模式
Functionality successfully tested in Chrome, Firefox 3.6, IE9 + compatibility mode
编辑2：
重读的问题检查，如果我这样做是正确的，我注意到我不太做你想做的，所以我更新的第一个编辑，让你的插件中，你可以有一个滚动的背景几个选项的链接。它保留我的老而判释也做你想要的...阅读code注释一些额外的说明。
Reading the question again checking if I did it right I noticed I didn't quite do what you want, so I updated the link in the first edit which gives you a plugin in which you can have several options for the scrolling background. It retains my 'old' interpetation while also doing what you want... Read comments in code for some extra descriptions.
修改3：
当我去上班了，今天我用事实证明我的插件'尝试'有点臃肿的困扰。而当你在评论中提及这不太符合要求。
As I went to work today I was bothered with the fact that my plugin 'try' was a little bloated. And as you mentioned in the comment it didn't quite fit the requirements.
所以我重写了它只能做你想要什么，而不是更多，在Chrome火狐，IE9 + compat的等等等等..测试脚本这是很多清洁。
So I rewrote it to only do what you want and not much more, tested in Chrome Firefox, IE9 +compat etc etc.. This script is a lot cleaner.
http://jsfiddle.net/sg3s/vZxHW/
可以选择使背景棒的顶部或底部，如果高度在窗口适合。闲来无事，但这已经是绰绰有余，做一些pretty很酷的东西：P
You can chose to make the background stick to the top or bottom if the height fits in the window. Nothing else, but that is already more than enough to do some pretty cool stuff :p
这篇关于动态背景滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
