jQuery Scrolling Background with Randomised Overlay Effect Demos

Tutorial by: Mark Adams, Kudos Web Solutions.
http://www.kudoswebsolutions.com

Full tutorial on how this effect works and how to implement it available at:
kudoswebsolutions.com

Example 1

Notice how the background slowly changes colour over time. Refresh the page a few times - you will see that the overlaid image moves around as well. This creates a unique effect on every page load, meaning that you will never have exactly the same design element twice. Leave us a comment to show how you have implemented this effect into your designs - we'd love to see how creative you have got!

Example 2

The below effect was achieved by adding a third div inside the 'id="overlay"' containing div. Giving it absolute positioning as well means you can then use a transparent png image in the foreground of this third div. Obviously, being transparent, you can see through certain areas of this .png and on to the background we have created.

Thanks for looking, have fun!