jQuery is really taking website animation effects to a whole new level. Parallax effects create the apparent position of an object when it is viewed along different lines of sight to give perception and depth to the animation. Here are 8 awesome examples of jQuery with parallax effects used on different websites.

1. Parallaxbokeh

CSS & jQuery Animated Parallax Bokeh Effect by David Leggett. Is is an animated parallax effect being used as a website background the effects seem to slow down the website a bit but its a good example.


2. jQuery Image Parallax

jQuery Image Parallax by Steve Fenton. It is is a plugin that gives an illusion of depth to an image with transparency (PNG, GIF) by repeating it and animating movement.


3. Motion Parallax

Motion parallax is a depth cue that results from our motion.


4. Gallaxy Parallax

Nice example of a parallax for outer space.


5. Eric Johansson

jQuery Website Parallax by Eric Johansson. Use the slider to animated the parallax across his personal website.


6. jQuery4u Frog Parallax

A frog parallax example by jQuery4u. See the tutorial on how to make your own jQuery parallax.


7. jParallax Plugin Demos

jQuery plugin jParallax examples by Steph Band. There are 4 examples in the set.


8. jParallax Plugin Demos

jQuery plugin jParallax Plugin. jParallax turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport.


Tags: jquery parallax
Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

  • http://monstercss.com Lucas

    And don’t forget http://monstercss.com :)

  • http://omagus.com omagus

    great job, inspiring me to do more with jquery

  • Dan Sanders

    http://www.spritely.net/ is a good example too.

  • http://www.curiositadesigns.com Hannah Lipking

    Great overview and examples! Just implemented some parallax-y goodness on my site… curiositadesigns.com.

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.