jquery function to generate Noise bg image


/ Published in: jQuery
Save to your folder(s)

run using: jQuery('body').noisy();


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.