动画的＆lt;身体GT;使用CSS和skrollr.js背景 [英] Animating the <body> background using CSS and skrollr.js
问题描述
我想动画背景位置的CSS属性的＆LT;身体GT; 使用标记 skrollr.js 。我希望它稍微移动背景图像起来作为页面滚动到给它一点点香料。但是，使用此...
I would like to animate the background-position CSS property of the <body> tag using skrollr.js. I want it to slightly move the background image up as the page scrolls to give it a little spice. However, using this...
data-0="background-position: 0px 0px;" data-1000="background-position: 0px -250px;"
...是行不通的。
...isn't working.
我试图用一个＆LT; DIV＆GT; 来完成这一壮举（动画公司背景位置），但这不给我，我要找的效果。当我动画背景属性的＆LT的; DIV＆GT; 的背景位置正常工作;但一旦＆LT; DIV＆GT; 滚动淡出人们的视线，无论是背后的 DIV 变得可见，这我不不想。有什么建议？
I tried using a <div> to accomplish the feat (animating its background-position), but that doesn't give me the effect I am looking for. When I animate the background-property of the <div>, the background-position works correctly; but once the <div> scrolls out of sight, whatever is behind the div become visible, which I don't want. Any suggestions?
推荐答案
好吧，我想通了，是什么造成的问题。我有我的CSS这样写的：
Okay, I figured out what was causing the issue. I had my CSS written like this:
background: url(/images/mainBG.jpg) no-repeat center fixed!important;
我需要删除！重要的和它的工作就像一个魅力。但是......现在我已经注意到了另一个问题（我将在这里发布的答案，如果我得到解决）。我实现成4.0 C＃.net网站与MasterPages这（在行动中看到这样的位置：brugrill.ntxdesigns.com）。考虑到所有的.aspx页面将不同长度的，因为这将根据关你放什么在数据 - 属性页的高度，我无法使用母版中的skrollr.js所以如果页是比数据 - 属性的像素位置更长（例如在网页是5000像素和的性质的数据 - 是1000）的背景之前的页完成滚动滚动停止。如果数据 - 性能比页的像素长度长，页面滚动不断后，它应该停止这看起来坏（你可以通过我的链接上面看到的）。我希望我可以用codebehind以 this.Page.Master.FindControl 来发现身体控制标签并修改数据 - 属性的值我需要的。
I needed to remove the "!important" and it worked like a charm. But... Now I've noticed another issue (Which I will post the answer here if I get resolved). I am implementing this into a 4.0 C# .net website with MasterPages (see this in action here: brugrill.ntxdesigns.com). Considering that all of the .aspx pages will be of different lengths, I can't use the skrollr.js within the MasterPage as it sets the height of the pages based off of what you put in the "data-" property so if the page is longer than the pixel position of the "data-" property (say the page is 5000 pixels and the property of the "data-" is 1000) the background scrolling stops before the page is finished scrolling. If the "data-" property is longer than the pixel length of the page, the page keeps scrolling after it should have stopped which looks bad (as you can see by my link above). I am hoping I can use the codebehind with a this.Page.Master.FindControl to find the body control tag and modify the "data-" properties to the values I need.
有没有办法通过JavaScript和jQuery或以其他方式获取页的当前像素的长度，并在数据 - 属性，使用该值？然后，我就不必硬code这个数据，如果该页面的增长，价值增长。任何建议将是巨大的！
Is there a way through javascript, jquery or otherwise to get the current pixel length of the page and use that value in the "data-" property? Then I wouldn't have to hardcode this data and if the page grows, the value grows. Any suggestions would be great!
这篇关于动画的＆lt;身体GT;使用CSS和skrollr.js背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
