Question

I’m working on a single-page website and I am trying to make a dynamic background animation on scroll. Let’s say that I have 4 different sections to my website. For each different section, I have a different background.

Using jQuery, I was able to retrieve the percentage of the scroll that is being used. So let’s say that each of my section are at 25% intervals (not entirely true, but this is only to picture what I am trying to achieve…). So at 0-25% backgroundA, at 25-50% backgroundB, at 50-75% backgroundC and 75-100%, backgroundD.

The background are similar but they rebound on each side of the website, similar to a ping-pong ball. The icon also change, so for example my first background might be a House image of 100px by 100px on the left, while the 2nd background might be a magnifying glass image on the right, still 100px by 100px.

Now, what I want to do is to make some kind of “fluidity” between the backgrounds, so it seems like as if the backgroundA was gradually transforming into backgroundB.

I have seen this kind of behavior on some websites so I am fairly sure it is possible… However, not quite sure how to do it.

If you need any more clarification, let me know.

Thanks ! 🙂

Answer 1

With the example given to your OP, the method that you may be looking for is to overlap background images slightly, vertically (where the lines seem to wrap over each other) and based on the scrollTop position, “step” functions are triggered on each of these backgrounds to animate widths (check the script on the page called bg.js). Within each “step,” these functions change the widths of the background images based upon some math formula — something like (scrollTop * (heightCurrentBg – currentWidth). All of which on the front-end, makes it seem as if it is one fluid line moving/bouncing back and forth.

Edit — As far as using scroll position to interact with the elements on the page, here is an example that I just whipped up, for the top nav floating element – http://jsfiddle.net/jmsessink/MyL6Y/2/

Notice that all of the magic happens in the math –

page.$window.scrollTop() / (page.bodyHeight - page.windowHeight) * (page.navWidth - page.navDivWidth);

Hopefully that gives you a good start on your project.

Edit #2 — here’s an example of how I would code what you’re trying to do (just replace the background colors with a background image of angled lines) –
http://jsfiddle.net/jmsessink/MyL6Y/3/