grained.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. /*! Grained.js
  2. * Author : Sarath Saleem - https://github.com/sarathsaleem
  3. * MIT license: http://opensource.org/licenses/MIT
  4. * GitHub : https://github.com/sarathsaleem/grained
  5. * v0.0.1
  6. */
  7. (function (window, doc) {
  8. "use strict";
  9. function grained(ele, opt) {
  10. var element = null,
  11. elementId = null,
  12. selectorElement = null;
  13. if (typeof ele === 'string') {
  14. element = doc.getElementById(ele.split('#')[1]);
  15. }
  16. if (!element) {
  17. console.error('Grained: cannot find the element with id ' + ele);
  18. return;
  19. } else {
  20. elementId = element.id;
  21. }
  22. //set style for parent
  23. if (element.style.position !== 'absolute') {
  24. element.style.position = 'relative';
  25. }
  26. element.style.overflow = 'hidden';
  27. var prefixes = ["", "-moz-", "-o-animation-", "-webkit-", "-ms-"];
  28. //default option values
  29. var options = {
  30. animate: true,
  31. patternWidth: 100,
  32. patternHeight: 100,
  33. grainOpacity: 0.1,
  34. grainDensity: 1,
  35. grainWidth: 1,
  36. grainHeight: 1,
  37. grainChaos: 0.5,
  38. grainSpeed: 20
  39. };
  40. Object.keys(opt).forEach(function (key) {
  41. options[key] = opt[key];
  42. });
  43. var generateNoise = function () {
  44. var canvas = doc.createElement('canvas');
  45. var ctx = canvas.getContext('2d');
  46. canvas.width = options.patternWidth;
  47. canvas.height = options.patternHeight;
  48. for (var w = 0; w < options.patternWidth; w += options.grainDensity) {
  49. for (var h = 0; h < options.patternHeight; h += options.grainDensity) {
  50. var rgb = Math.random() * 256 | 0;
  51. ctx.fillStyle = 'rgba(' + [rgb, rgb, rgb, options.grainOpacity].join() + ')';
  52. ctx.fillRect(w, h, options.grainWidth, options.grainHeight);
  53. }
  54. }
  55. return canvas.toDataURL('image/png');
  56. };
  57. function addCSSRule(sheet, selector, rules, index) {
  58. var ins = '';
  59. if (selector.length) {
  60. ins = selector + "{" + rules + "}";
  61. } else {
  62. ins = rules;
  63. }
  64. if ("insertRule" in sheet) {
  65. sheet.insertRule(ins, index);
  66. } else if ("addRule" in sheet) {
  67. sheet.addRule(selector, rules, index);
  68. }
  69. }
  70. var noise = generateNoise();
  71. var animation = '',
  72. keyFrames = ['0%:-10%,10%', '10%:-25%,0%', '20%:-30%,10%', '30%:-30%,30%', '40%::-20%,20%', '50%:-15%,10%', '60%:-20%,20%', '70%:-5%,20%', '80%:-25%,5%', '90%:-30%,25%', '100%:-10%,10%'];
  73. var pre = prefixes.length;
  74. while (pre--) {
  75. animation += '@' + prefixes[pre] + 'keyframes grained{';
  76. for (var key = 0; key < keyFrames.length; key++) {
  77. var keyVal = keyFrames[key].split(':');
  78. animation += keyVal[0] + '{';
  79. animation += prefixes[pre] + 'transform:translate(' + keyVal[1] + ');';
  80. animation += '}';
  81. }
  82. animation += '}';
  83. }
  84. //add animation keyframe
  85. var animationAdded = doc.getElementById('grained-animation');
  86. if (animationAdded) {
  87. animationAdded.parentElement.removeChild(animationAdded);
  88. }
  89. var style = doc.createElement("style");
  90. style.type = "text/css";
  91. style.id = 'grained-animation';
  92. style.innerHTML = animation;
  93. doc.body.appendChild(style);
  94. //add custimozed style
  95. var styleAdded = doc.getElementById('grained-animation-' + elementId);
  96. if (styleAdded) {
  97. styleAdded.parentElement.removeChild(styleAdded);
  98. }
  99. style = doc.createElement("style");
  100. style.type = "text/css";
  101. style.id = 'grained-animation-' + elementId;
  102. doc.body.appendChild(style);
  103. var rule = 'background-image: url(' + noise + ');';
  104. rule += 'position: absolute;content: "";height: 300%;width: 300%;left: -100%;top: -100%;';
  105. pre = prefixes.length;
  106. if (options.animate) {
  107. while (pre--) {
  108. rule += prefixes[pre] + 'animation-name:grained;';
  109. rule += prefixes[pre] + 'animation-iteration-count: infinite;';
  110. rule += prefixes[pre] + 'animation-duration: ' + options.grainChaos + 's;';
  111. rule += prefixes[pre] + 'animation-timing-function: steps(' +options.grainSpeed + ', end);';
  112. }
  113. }
  114. //selecter element to add grains
  115. selectorElement = '#' + elementId + '::before';
  116. addCSSRule(style.sheet, selectorElement, rule);
  117. }
  118. window.grained = grained;
  119. //END
  120. })(window, document);