first commit

2023-03-15 15:31:55 +01:00
commit bf635fea29
52 changed files with 1391 additions and 0 deletions
@@ -0,0 +1,148 @@
+/*! Grained.js
+* Author : Sarath Saleem  - https://github.com/sarathsaleem
+* MIT license: http://opensource.org/licenses/MIT
+* GitHub : https://github.com/sarathsaleem/grained
+* v0.0.1
+*/
+(function (window, doc) {
+
+    "use strict";
+
+    function grained(ele, opt) {
+
+        var element = null,
+            elementId = null,
+            selectorElement = null;
+
+        if (typeof ele === 'string') {
+            element = doc.getElementById(ele.split('#')[1]);
+        }
+
+        if (!element) {
+            console.error('Grained: cannot find the element with id ' + ele);
+            return;
+        } else {
+            elementId = element.id;
+        }
+
+        //set style for parent
+        if (element.style.position !== 'absolute') {
+            element.style.position = 'relative';
+        }
+        element.style.overflow = 'hidden';
+
+        var prefixes = ["", "-moz-", "-o-animation-", "-webkit-", "-ms-"];
+
+        //default option values
+        var options = {
+            animate: true,
+            patternWidth: 100,
+            patternHeight: 100,
+            grainOpacity: 0.1,
+            grainDensity: 1,
+            grainWidth: 1,
+            grainHeight: 1,
+            grainChaos: 0.5,
+            grainSpeed: 20
+
+        };
+
+        Object.keys(opt).forEach(function (key) {
+            options[key] = opt[key];
+        });
+
+
+        var generateNoise = function () {
+            var canvas = doc.createElement('canvas');
+            var ctx = canvas.getContext('2d');
+            canvas.width = options.patternWidth;
+            canvas.height = options.patternHeight;
+            for (var w = 0; w < options.patternWidth; w += options.grainDensity) {
+                for (var h = 0; h < options.patternHeight; h += options.grainDensity) {
+                    var rgb = Math.random() * 256 | 0;
+                    ctx.fillStyle = 'rgba(' + [rgb, rgb, rgb, options.grainOpacity].join() + ')';
+                    ctx.fillRect(w, h, options.grainWidth, options.grainHeight);
+                }
+            }
+            return canvas.toDataURL('image/png');
+        };
+
+        function addCSSRule(sheet, selector, rules, index) {
+            var ins = '';
+            if (selector.length) {
+                ins = selector + "{" + rules + "}";
+            } else {
+                ins = rules;
+            }
+
+            if ("insertRule" in sheet) {
+                sheet.insertRule(ins, index);
+            } else if ("addRule" in sheet) {
+                sheet.addRule(selector, rules, index);
+            }
+        }
+
+
+        var noise = generateNoise();
+
+        var animation = '',
+            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%'];
+
+        var pre = prefixes.length;
+        while (pre--) {
+            animation += '@' + prefixes[pre] + 'keyframes grained{';
+            for (var key = 0; key < keyFrames.length; key++) {
+                var keyVal = keyFrames[key].split(':');
+                animation += keyVal[0] + '{';
+                animation += prefixes[pre] + 'transform:translate(' + keyVal[1] + ');';
+                animation += '}';
+            }
+            animation += '}';
+        }
+
+        //add animation keyframe
+        var animationAdded = doc.getElementById('grained-animation');
+        if (animationAdded) {
+            animationAdded.parentElement.removeChild(animationAdded);
+        }
+        var style = doc.createElement("style");
+        style.type = "text/css";
+        style.id = 'grained-animation';
+        style.innerHTML = animation;
+        doc.body.appendChild(style);
+
+        //add custimozed style
+        var styleAdded = doc.getElementById('grained-animation-' + elementId);
+        if (styleAdded) {
+            styleAdded.parentElement.removeChild(styleAdded);
+        }
+
+        style = doc.createElement("style");
+        style.type = "text/css";
+        style.id = 'grained-animation-' + elementId;
+        doc.body.appendChild(style);
+
+        var rule = 'background-image: url(' + noise + ');';
+        rule += 'position: absolute;content: "";height: 300%;width: 300%;left: -100%;top: -100%;';
+        pre = prefixes.length;
+        if (options.animate) {
+            while (pre--) {
+                rule += prefixes[pre] + 'animation-name:grained;';
+                rule += prefixes[pre] + 'animation-iteration-count: infinite;';
+                rule += prefixes[pre] + 'animation-duration: ' + options.grainChaos + 's;';
+                rule += prefixes[pre] + 'animation-timing-function: steps(' +options.grainSpeed + ', end);';
+            }
+        }
+
+        //selecter element to add grains
+        selectorElement = '#' + elementId + '::before';
+
+
+        addCSSRule(style.sheet, selectorElement, rule);
+
+
+    }
+
+    window.grained = grained;
+    //END
+})(window, document);