The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Css scrolling div problem

  • # February 4, 2013 at 6:23 am


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

    Here is my effort:

    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
    ‘margin-top’ : -(scrollPos/3)+”px”,
    ‘opacity’ : 1-(scrollPos/300)

    //Scroll the background of the banner
    ‘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() {

    hope that was helpful.

    # February 6, 2013 at 5:32 am

    Thanks very much for your reply.

    I have this example working:

    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


    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!


Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed