Basic plugin-free parallax scrolling

Everybody likes the trendy parallax scrolling effect... or so designers seem to believe nowadays.

Although most certainly overused, it can be a nice and useful tool sometimes. While there are great plugins out there (Matthew's parallax.js, jparallax, etc.), if you need something simple with just one scrolling image, and don't feel like including another 10k plugin, there's an easy way to do a basic effect with just a few lines of JavaScript/jQuery and CSS.

Assuming you want the effect applied on a <div class="hero"> with a background image higher than the element height and an initial background-position: center bottom, you can do something like this:

var $hero = $('.hero'),
    heroBottom = $hero.offset().top + $hero.height();

$win.on('scroll', function() {
  var scrollTop = $win.scrollTop(),
      yPosPercent = (1 - Math.min(1, scrollTop / heroBottom)) * 100;

  $hero.css('background-position', 'center ' + yPosPercent + '%');
});

You can see it live here on home, services and portfolio pages.