Advanced Search

jquery function to generate Noise bg image

/ Published in: jQuery
Save to your folder(s)
run using: jQuery('body').noisy();

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. jQuery.fn.noisy = function(opacity) {
  2.   if (typeof(opacity) === 'undefined') {
  3.     opacity = 0.1;
  4.   }
  5.  
  6.   var wrapper = jQuery(this).wrapInner('<div />').children();
  7.   var canvas = document.createElement("canvas");
  8.   canvas.width = 100;
  9.   canvas.height = 100;
  10.   var ctx = canvas.getContext("2d");
  11.   var x, y;
  12.   for (x=0; x<canvas.width; x += 1) {
  13.     for (y=0; y<canvas.height; y += 1) {
  14.       var r = Math.floor(Math.random() * 75);
  15.       var g = Math.floor(Math.random() * 75);
  16.       var b = Math.floor(Math.random() * 75);
  17.       ctx.fillStyle = "rgba("+r+","+g+","+b+","+opacity+")";
  18.       ctx.fillRect(x, y, 1, 1);
  19.     }
  20.   }
  21.  
  22.   wrapper.css({
  23.     'background-image': "url("+canvas.toDataURL("image/png")+")",
  24.     width: '100%',
  25.     height: '100%'
  26.   });
  27. };

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.