Skip to content
This repository

A jQuery plugin that adds random noise to the background of a given element.

branch: master

Updated minified jquery version after notice from Bjørn Sortland

There seemed to be a problem with the minified version of the jquery version (http://www.kaofisis.com/log/140312/), I re-compiled it (using the "simple" preference in the Closure Compiler) and hopefully that fixed the problem.
latest commit dfb6750fb9
Daniel Rapp authored
Octocat-spinner-32 example added one more example September 30, 2013
Octocat-spinner-32 extjs Fixed issue #22 October 11, 2012
Octocat-spinner-32 jquery Updated minified jquery version after notice from Bjørn Sortland March 12, 2014
Octocat-spinner-32 mootools Fixed issue #22 October 11, 2012
Octocat-spinner-32 .gitignore added one more example September 30, 2013
Octocat-spinner-32 MIT-LICENSE.txt Added a license March 16, 2011
Octocat-spinner-32 README.md Update README.md December 16, 2013
Octocat-spinner-32 bower.json Create bower.json August 12, 2013
README.md

Noisy

A jQuery plugin that adds random noise to the background of an element.

Demo

You can try the interactive demo.

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 jquery version.

Rationale

What's wrong with using an image?

  1. 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.
  2. 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.
  3. 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 :)

Flattr this

Something went wrong with that request. Please try again.