Free jQuery Scrolling Background with Randomised Overlay Effect
Date: 29 April 2011 | Posted by: Src
Demo:
http://9.bb/286885/4890-demo-jquery-scrolling-bg
Source URL:
http://www.kudoswebsolutions.com/web-design-blog/jquery-randomised-background-scrolling-effect-tutorial
Firstly, lets take a look at what we’re aiming to achieve. Check out the demos by clicking the link above. See how the background appears to change gradually? Next refresh the page a few times and see how the overlaid pattern also changes on each reload meaning that the effect is different every time you do so. You can achieve this effect very easily to add great visual interest to your web design, using just two images, a tiny bit of xhtml and some jquery magic…
Your final result may not look identical to the above, which is good – go get creative with it! Take the second example on the demo page. This gives the impression of a scrolling background on text, but of course it uses images to achieve it. However you may implement it, the principles remain the same:
A continually scrollling background image using javascript
A static overlay image with transparency
Random starting positions for both images allowing for a unique appearance on every page load, again using javascript
See full article