Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Css scrolling div problem

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #42462
    matthisco
    Participant

    Hello,

    I’d like to fade out a div when the page is scrolled, similar to this site:

    http://themetrust.com/demos/hero/

    Here is my effort:

    http://www.mharrisweb.co.uk/tester.htm

    Its getting there but can anyone please tell me how I can fix and scroll over the background like in the hero theme and make it slicker?

    Many thanks

    #123258
    CarlRosell
    Participant

    by looking in his code this is what drives the animation.

    ///////////////////////////////
    // Parallax
    ///////////////////////////////

    // Calcualte the home banner parallax scrolling
    function scrollBanner() {
    //Get the scoll position of the page
    scrollPos = jQuery(this).scrollTop();

    //Scroll and fade out the banner text
    jQuery(‘#bannerText’).css({
    ‘margin-top’ : -(scrollPos/3)+”px”,
    ‘opacity’ : 1-(scrollPos/300)
    });

    //Scroll the background of the banner
    jQuery(‘#homeBanner’).css({
    ‘background-position’ : ‘center ‘ + (-scrollPos/8)+”px”
    });
    }

    #123266
    CarlRosell
    Participant

    and then he detects the scrolling event and call that function every time.

    jQuery(window).scroll(function() {
    scrollBanner();
    });

    hope that was helpful.

    #123549
    matthisco
    Participant

    Thanks very much for your reply.

    I have this example working:

    http://www.mharrisweb.co.uk/

    Is there anyway I can stop the green div scrolling over the top of the navigation?

    Thanks again

    #123550
    benhanley
    Participant

    Hey,

    Is your image in the background of that lime green div, or he background of the page? Could you not just make the div transparent? Sorry if this seems like a dumb suggestion, but it’s such a cool effect, I’m going to have a crack at it myself now!

    Ben.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.