Noisy
A jQuery plugin that adds random noise to the background of an element.
Dependency
Install
Just download the repository and link to the local minimized script:
<script src="noisy/jquery/jquery.noisy.min.js"></script>
Alternatively, include it from cdnjs.com:
<script src="//cdnjs.cloudflare.com/ajax/libs/noisy/1.2/jquery.noisy.min.js"></script>
Usage
An example showing all parameters would be the following:
$('body').noisy({
intensity: 0.9,
size: 200,
opacity: 0.08,
fallback: 'fallback.png',
monochrome: false
});
But since all parameters are optional you can just use it like this:
$('body').noisy();
You can also set a particles color with color option like this:
$('body').noisy({
intensity: 0.9,
size: 200,
opacity: 0.08,
fallback: 'fallback.png',
randomColors: false, // true by default
color: '#000000'
});
This works, for now, just with the jquery version.
Rationale
What's wrong with using an image?
- Bandwidth cost
Due to the random nature of background images with a noisy overlay,
compression usually isn't very effective. With this 1 KB script you can
generate images up to 300 KB without loading for even a second. Saving
bandwidth costs and loading time. - Development speed
Trying out an image with a different noise opacity involves a much smaller
amount of steps by just updating a parameter than changing and saving the
image in Photoshop. - Flexibility
By generating the background image in javascript, one does not need to rely
on the webserver being able to serve static files for it. With generated
favicons etc. a static files serving webserver becomes optional.
Contact
If you have any questions or suggestions that don't fit GitHub, send them to @DanielRapp
Support
I'd be flattered if you'd flattr this :)
