Parallax H1 Over BG Image

Question

I have an h1 atop a background image,

<section class="cd-intro">
    <h1>Content</h1>
</section>`

With the following css:

.cd-intro {
    position: relative;
    height: 100%;
    background: url("../img/buff.jpg") no-repeat center center;
    background-size: cover;
    z-index: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

I'm hoping to duplicate more or less exactly this effect here, as succintly as possible. Input appreciated.

What have you tried so far, where does it fail? Also, please create a fiddle with the minimum necessary code to play around in it. — connexo, Jun 06 '15 at 20:43
possible duplicate of [How to achieve parallax behind horizontal bars while scrolling](http://stackoverflow.com/questions/22624844/how-to-achieve-parallax-behind-horizontal-bars-while-scrolling) — TylerH, Jun 06 '15 at 21:06
@TylerH the question you link to has a fixed background. The effect OP linked to uses that effect but it also uses js to achieve a third level of movement (see my answer). — jcuenod, Jun 06 '15 at 22:16

score 1 · Accepted Answer · edited May 23 '17 at 12:14

Questions have been asked about the basic parallax effect before so take a look around stackoverflow if you're still wondering about that.

As for the parallax header movement, the short answer is:

jQuery(window).scroll(function() {
    //Get the scoll position of the page
    scrollPos = jQuery(this).scrollTop();

    //Scroll and fade out the banner text
    jQuery('.featured-title').css({
      'margin-top' : -(scrollPos/3)+"px",
      'opacity' : 1-(scrollPos/300)
    });    
});

The way I came to that was by having a look at the source javascript on the website. You will see in main.js:

///////////////////////////////
// Parallax Scrolling
///////////////////////////////

// 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('.featured-title').css({
      'margin-top' : -(scrollPos/3)+"px",
      'opacity' : 1-(scrollPos/300)
    });
}


jQuery(document).ready(function(){
///////////////////////////////
// Initialize Parallax 
/////////////////////////////// 
    if(!isMobile()) {
        jQuery(window).scroll(function() {        
                scrollBanner();       
        });
    }
    else {
        jQuery('#banner-text').css({
            'position': 'relative',
            'text-align': 'center',
            'margin': 'auto',
            'padding': '0',
            'top':'0'
        });
    }
    /* bunch of other stuff */
}

What's going on here is that the scroll event on the window object is being listened for. When this event fires, the margin-top value and the opacity are being changed proportionally to the distance scrolled (see the scrollBanner function).

Parallax H1 Over BG Image

1 Answers1