Parallax Scrolling Made Easy

Recently, we wanted to add a small parallax effect to the header of a website we designed & developed. Thankfully, several talented developers have spent time developing jQuery plugins for this purpose. Most notably, we were thinking of using Ian Lund’s jQuery plugin. However, we just needed the parallax effect for the top header background image. Using a jQuery plugin seemed a bit heavy for what we needed.

So, we applied a little bit of jQuery code to the div element containing our page header:

var top_header = '';
$(document).ready(function(){
  top_header = $('.header-container');
});
$(window).scroll(function () {
  var st = $(window).scrollTop();
  top_header.css({'background-position':"center "+(st*.5)+"px"});
});

With a few lines of code, we had our parallax effect ready to go. Too easy? Yeah, we thought so too.

Click here to see it live and in action!