Grow your CSS skills. Land your dream job.

Css scrolling div problem

  • # February 4, 2013 at 6:23 am

    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

    # February 4, 2013 at 7:28 am

    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”
    });
    }

    # February 4, 2013 at 7:30 am

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

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

    hope that was helpful.

    # February 6, 2013 at 5:32 am

    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

    # February 6, 2013 at 6:12 am

    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)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".