SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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 : 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 !

  2. #2
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well libeo.com use jquery for this http://www.libeo.com/wp-content/them.../js/libs/bg.js. It appears to reveal 6 absolute positioned background images as you scroll down.

    Code:
    	#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/...g-with-jquery/

  3. #3
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    $(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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •