Animating the <body> background using CSS and skrollr.js

Question

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?

can't reproduce jsbin.com/sobuwopo/1/edit

Prinzhorn
– Prinzhorn

2014-06-15 11:20:41 +00:00
Commented Jun 15, 2014 at 11:20 — Prinzhorn
– Prinzhorn, Commented Jun 15, 2014 at 11:20

Jeff Mcbride · Accepted Answer · 2014-06-15 22:13:13Z

0

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;

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.

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!

answered Jun 15, 2014 at 22:13

Jeff Mcbride

4532 gold badges7 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BoltClock Over a year ago

It would be better to post your follow-up question as a new question so that its answers don't get confounded with the ones here.

Collectives™ on Stack Overflow

Animating the <body> background using CSS and skrollr.js

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related