jQuery 3D Parallax Scroll Effect

August 30, 2011 at 9:18 pm By
Download Demo

Parallax Scrolling

Okay, so you might remember a bit earlier this month I made a post on a Parallax effect using images and mouse movements. However working recently on a theme for wordpress, which I hope to share with you guys eventually, I managed to create a pretty cool plugin for making 3D Parallax Effects when scrolling.

I haven’t done extensive testing, so if you find any bugs please leave them in the comments below!

How it works

So first of all you need to download the plugin file jquery.parallaxscroll.js. I’ve disabled this on mobile devices because it does some weird stuff, and is pretty jerky. Include both jQuery and jquery.parallaxscroll.js in the head of your document, like so:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.parallaxscroll.js"></script>

Then all you have to do is run the function. It has 3 settings, but you only need to change one to accomplish the effect. Here’s an example applying all 3 settings. Only multiplier will matter in most cases

<script type="text/javascript">
    $('element').parallaxScroll({ 
        multiplier: '2.0',
        position: 'absolute',
        negative: true
    });
</script>
  • Element: The element you wish to apply the scroll effect to.
  • Multipler: The multiplier is how much faster the item will move as you scroll. For example, if its '2.0', for every pixel the person scrolls, the element will scroll 2px.
  • Position: If you’ve set the position in the CSS the plugin will detect this. If you haven’t it’ll use relative as a default, which will work for most things, but this is just in case you need to change it. Fixed usually works great
  • Negative: Default is true. If it’s set to false, then the element will move down instead of up.

Changelog

  • 1.0.1: Fixed a small bug that didn’t allow changing the position
  • 1.0.1b: I noticed a small bug where things might not work as expected in firefox because firefox seems to calculate the ‘bottom’ css property differently. I have removed this and you can download that version here if you have some problems. The original is still up.