norin — 2012-12-07T15:56:20-05:00 — #1
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...
ryanking1809 — 2012-12-07T16:46:29-05:00 — #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.
background: url(../img/bg1.png) no-repeat;
background: url(../img/bg2.png) no-repeat;
background: url(../img/bg3.png) no-repeat right top;
background: url(../img/bg4.png) no-repeat;
background: url(../img/bg5.png) no-repeat right top;
background: url(../img/bg6.png) no-repeat;
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:
norin — 2012-12-10T16:28:39-05:00 — #3
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...
ralphm — 2012-12-10T17:59:29-05:00 — #4
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.