Simple Parallax Header Jun 19, 20159 Commentsparallax, jQuery, CSS3, Tutorial

<header>
  <h1>Basic Parallax</h1>
  <img class="parallax" src="https://dl.dropboxusercontent.com/u/17846948/codepen/sunset.jpg" />
</header>
<section class="body-copy">
  <p>Craft beer occupy PBR lo-fi. Seitan cold-pressed Tumblr locavore freegan deep v 90's Vice. Whatever Blue Bottle raw denim, Williamsburg Tumblr fashion axe viral craft beer keffiyeh. Flexitarian lomo Pinterest, retro narwhal fanny pack lo-fi disrupt
    photo booth street art DIY bitters chambray taxidermy. Fixie put a bird on it crucifix, food truck street art ugh Etsy bicycle rights disrupt wolf twee Pitchfork pickled Tumblr VHS. Vice shabby chic flannel locavore, tousled kale chips aesthetic chia
    cred next level yr banh mi migas PBR&amp;B ugh. Locavore dreamcatcher organic fashion axe normcore banh mi.</p>
  <p>Wes Anderson four dollar toast Carles, quinoa synth XOXO beard next level cred. Marfa taxidermy migas pork belly wayfarers meditation, Banksy cardigan yr sustainable normcore street art Pinterest direct trade before they sold out. Swag Marfa tilde Brooklyn
    mlkshk, cold-pressed Godard Echo Park messenger bag pug ugh keytar banjo Pinterest. Four loko High Life ethical direct trade. Meditation migas twee, 90's Godard pour-over Pinterest locavore stumptown chambray Echo Park beard McSweeney's ugh +1. Literally
    paleo chia, actually disrupt hoodie drinking vinegar pour-over. Lo-fi tilde Pitchfork +1 irony High Life trust fund, hoodie Austin.</p>
  <p>Truffaut jean shorts freegan, butcher lumbersexual sriracha seitan disrupt sartorial craft beer selfies literally. Jean shorts raw denim lo-fi plaid, messenger bag Odd Future fashion axe hella Helvetica Pitchfork McSweeney's fixie sriracha Carles. Artisan
    deep v +1, Austin keffiyeh meh church-key slow-carb VHS mustache. Keffiyeh before they sold out vegan, fanny pack fingerstache pork belly pickled try-hard gastropub swag. Art party try-hard four loko VHS, Etsy paleo meh sustainable whatever Truffaut
    normcore Portland tote bag chillwave Tumblr. Fixie Odd Future flexitarian quinoa, tousled wayfarers American Apparel +1 cray retro. Selfies migas Odd Future, vegan Tumblr gastropub locavore beard pork belly Neutra.</p>
  <p>Stumptown cold-pressed kogi authentic small batch Echo Park cliche High Life fanny pack actually blog, scenester ennui selvage. Bespoke flannel vegan drinking vinegar disrupt. High Life readymade tattooed 8-bit, Truffaut church-key tofu tousled four
    dollar toast Pinterest fixie. Bespoke Williamsburg 90's tote bag, seitan taxidermy four loko roof party chambray typewriter actually disrupt Marfa banjo +1. You probably haven't heard of them viral sriracha ugh, DIY before they sold out Tumblr cronut
    gluten-free paleo kitsch. Bicycle rights umami Truffaut, sustainable messenger bag cray flannel Marfa. Cred pickled fap street art, you probably haven't heard of them kogi retro.</p>
</section>

See the Pen Basic Parallax by Jesse Couch (@designcouch) on CodePen.

header {
  height:500px;
  overflow:hidden;
  position:relative;
  h1 {
    position:absolute;
    top:50%;
    width:100%;
    text-align:center;
    font-size:60px;
    font-family: 'Limelight', cursive;
    font-weight:900;
    line-height:60px;
    margin-top:-30px;
    color:white;
    text-shadow:4px 4px 0 rgba(0,0,0,.3);
  }
  #parallax {
    width:100%;
    height:auto;
    display:block;
  }
}
section {
  &.body-copy {
    max-width:600px;
    margin:50px auto 0 auto;
    font-family:helvetica neue,helvetica,arial,sans-serif;
    font-weight:200;
    p {
      margin: 0 0 20px 0;
      font-size:16px;
      line-height:22px;
    }
  }
}

See the Pen Basic Parallax by Jesse Couch (@designcouch) on CodePen.

// keep in mind that this script is written to target images that are already at the very top of the page. It would need to be adjusted for images that are further down.

$(document).ready(function() {
// once the image loads, fire off the first function
  $('.parallax').load(function() {
// store targeted image
    var target = $(this);
// get the height of the image
    var parallaxHeight = target.height();
// calculate the offset needed to vertically center the image in its container 
    var initialOffset = parallaxHeight / 2;
// use the calculated offset to create a negative top margin that vertically centers the image
    target.css('margin-top', '-' + initialOffset + 'px');
    
// when the user scrolls, execute the parallax effect
    $(window).scroll(function() {
// get the current scroll distance from the top of the screen
      var windowScrollPosition = ($(window).scrollTop())/2;
// subtract the scroll position from the previously calculated offset
      var newParallaxOffset = (initialOffset - windowScrollPosition);
// as user scrolls, continuallly adjust the negative top margin on the image
      target.css('margin-top','-'+newParallaxOffset+'px')
    });
  });
});

See the Pen Basic Parallax by Jesse Couch (@designcouch) on CodePen.