jQuery Plugin To Add Animated Noise Over An Image - NoisyImage

File Size: 300KB
Views Total: 1960
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Add Animated Noise Over An Image - NoisyImage

NoisyImage is a fancy jQuery plugin that adds an animated noise overlay over an image. Also can work with jQuery noise plugin for more configurations.

How to use it:

1. Include jQuery javascript library and jQuery nosyimage plugin in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.noisyimage.js"></script>

2. Include jQuery noise plugin in the page. (Optional)

<script src="jquery.noisy.js"></script>

3. Insert an image in your page.

<img class="demo" src="1.jpg" alt="Image 1">

4. Call the plugin on this image.

<script>
$(document).ready(function() {
$('.demo').noisyImage({
image: 'noise.png', 
opacity: 1,
scale: 1.2,
speed: 5
});
});
</script>

5. All the configurations when worked with jQuery noise plugin.

<script>
$(document).ready(function() {
$('.demo').noisyImage({
opacity: 0.2,
scale: 1.2,
speed: 5,
intensity: 0.8,
size: 250,
monochrome: true,
randomColors: true,
colorChannels: [0, 255],
fallback: 'noise.png',
disableCache: false
});
});
</script>

This awesome jQuery plugin is developed by ChristianCook. For more Advanced Usages, please check the demo page or visit the official website.