Changing background on scroll?

JavaScript
1

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 : www.libeo.com

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:

2

Well libeo.com use jquery for this http://www.libeo.com/wp-content/themes/libeo/js/libs/bg.js. 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:
http://cssdeck.com/labs/scrolling-image-reveal

This might help with jquery scrolling effects:
http://tympanus.net/codrops/2011/12/05/lateral-on-scroll-sliding-with-jquery/

3

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…

4
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.