Parallax Scrolling Made Easy

Josh Erickson
November 30, 2012

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 = '';
  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!

1 Comment
August 23, 2013

Well this was just amazing. Not going to lie, I doubted how easy this would be. Totally going to Evernote this page for future reference. Thanks for the tip!

Join the discussion

Work With Us?