Simple Parallax Effect (jQuery)

This post is old. It may contain broken links, missing images and incorrect information.

I’m currently working on a website for a local business here in Whitby.  As part of the design, I wanted to implement a simple parallax scrolling effect on the background image as visitors move down a page.  Unlike some complicated parallax effects, mine only has a single image which required movement.

Here’s the code I’ve used to achieve the effect:

HTML

<div id="parallax"><img src="location/of/image" alt="" /></div>

CSS

#parallax{width:100%;position:fixed;top:0px;left:0px;}
#parallax img{width:100%;position:relative;}

Javascript (jQuery)

The number 5 on the penultimate row can be changed to alter the speed at which the image moves, relative to the scrolling of the window, and don’t forget to edit your image tag (IMG) to match your markup:

$(window).scroll(function() {
    var x = $(this).scrollTop();
    $('IMG').css('top', parseInt(-x / 5) + 'px');
});