Changing background on scroll?

Hello everyone,

I am trying to make a background which would change as the user scroll to add some kind of “pointer” showing the different areas of my website (one page website). Here is an example similar to what I am trying to do :

As you can see, the ribbon in the background “almost” follow the content of the page, jumping from one side to the other as the user scroll through the content.

I would like to know if someone could help me out with this my giving me some pointers, can this be achieved with only CSS or is jQuery a must in this case ? If someone have some examples which are simpler it would also help a lot.

I started looking into parallax, however I am not quite sure to be on the right track…

Thanks ! :slight_smile:

Well use jquery for this It appears to reveal 6 absolute positioned background images as you scroll down.

	#bg1 {
		background: url(../img/bg1.png) no-repeat;
		width: 328px;
		height: 189px;
		position: absolute;
		z-index: 0;
		left: 186px;
		top: 0px;
	#bg2 {
		background: url(../img/bg2.png) no-repeat;
		width: 1075px;
		height: 723px;
		position: absolute;
		z-index: 0;
		left: 187px;
		top: 10px;
	#bg3 {
		background: url(../img/bg3.png) no-repeat right top;
		width: 911px;
		height: 627px;
		position: absolute;
		z-index: 0;
		right: 303px;
		top: 587px;
	#bg4 {
		background: url(../img/bg4.png) no-repeat;
		width: 890px;
		height: 497px;
		position: absolute;
		z-index: 0;
		left: 349px;
		top: 1080px;
	#bg5 {
		background: url(../img/bg5.png) no-repeat right top;
		width: 585px;
		height: 342px;
		position: absolute;
		z-index: 0;
		right: 325px;
		top: 1463px;
	#bg6 {
		background: url(../img/bg6.png) no-repeat;
		width: 94px;
		height: 899px;
		position: absolute;
		z-index: 0;
		left: 654px;
		top: 1689px;

Unfortunately I’m not skilled enough to completely reverse engineer it for you but these might help.

I’m not sure if you can achieve the same effect using only css but this is something similar:

This might help with jquery scrolling effects:

After playing quite a while with javascript and jQuery, I think I might have found some way to do something similar…

Basically, I take the current scroll position then divide it with the max height - win height then turn it into a %. I tried with pixels, however IE and Firefox did not gave me the same values so I went for %. Here is my javascript:

$(window).scroll(function() {
    var curr = $(document).scrollTop();
    var max = $(document).height();
    var win = $(window).height();
    var comp = Math.round((curr / (max-win)) * 100);

What I am planning to do is to change the background based on the value of comp, however I am not quite sure that I will be able to have the fluidity…

Off Topic:

I’ve moved this to the JS forum, as it really seems to be going in that direction. Any solution is most likely going to need JS.