{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Luminary・发光体 的问题《Animating the <body> background using CSS an》','https://www.manongdao.com/q-999740.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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.
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?
Okay, I figured out what was causing the issue. I had my CSS written like this:
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.FindControlto find the body control tag and modify the "data-" properties to the values I need.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!