- ×
A jQuery plugin that adds random noise to the background of a given element.
Filed under images › 2d graphicsShow AllNoisy
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 :)
Version 1.1.1
- Bandwidth cost