mgGlitch.js

a little jquery helper to glitch everything
hmongouachon · Jun 11, 2016 · 43d3ade · 43d3ade
1 parent c29c577
commit 43d3ade
Show file tree

Hide file tree

Showing 4 changed files with 316 additions and 0 deletions.
diff --git a/demo/glitch-demo1.html b/demo/glitch-demo1.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>mgGlitch demo</title>
+    <link href='https://fonts.googleapis.com/css?family=Roboto:400,900,300' rel='stylesheet' type='text/css'>
+    <!-- Demo styles -->
+    <style>
+        *, *:after, *:before {-moz-box-sizing:border-box; box-sizing:border-box;}
+        body, html {position: relative; height: 100%; width: 100%; overflow: hidden;}
+        body { background-color: #fff; margin: 0;}
+        h1 {position: absolute; top:0; left :0; z-index: 10; width: 100%; text-align: center; font-family: 'Roboto', Arial, Helvetica, sans-serif; margin-top: 30px; font-size: 16px;  color: #f54955; }
+        p { position: absolute; bottom:0; left :0; z-index: 10; width: 100%; text-align: center; font-family: 'Roboto', Arial, Helvetica, sans-serif; color: #999999;  margin-bottom: 30px; font-size: 14px;}
+        p a {color: #f54955; text-decoration: none; outline: none;}
+
+        .container {position: relative; margin: 80px; background-color: #fff; width: calc(100% - 160px); height: calc(100% - 160px); overflow: hidden; }
+
+        /* glitch elem must have absolute position */
+        .glitch-img {position: absolute; width : 100%; height : 100%; top: 0 ; left : 0; background-position:center;  -moz-background-size:cover;-o-background-size:cover;-webkit-background-size:cover;background-size:cover;
+        } 
+
+    </style>
+</head>   
+<body>
+
+    <h1>mgGlitch.js</h1>
+
+    <div class="container">
+        <!-- this elem will be glitch -->
+        <div class="glitch-img" style="background-image: url('img/mosh1.jpg"></div>
+    </div>
+
+    <p>Find this project on <a href="#" title="Github">Github</a></p>
+
+    <!-- include jQuery -->
+    <script
+	    src="https://code.jquery.com/jquery-2.2.4.min.js"
+	    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
+	    crossorigin="anonymous">
+    </script>
+
+    <!-- include plugin src -->
+    <script src="../src/mgGlitch.min.js"></script>
+
+    <!-- active plugin -->
+    <script>
+		$( function() {
+			$( ".glitch-img" ).mgGlitch({
+				destroy : false, // set 'true' to stop the plugin
+                glitch: true, // set 'false' to stop glitching
+                scale: true, // set 'false' to stop scaling
+                blend : true, // set 'false' to stop glitch blending
+                blendModeType : 'hard-light', // select blend mode type
+                glitch1TimeMin : 600, // set min time for glitch 1 elem
+                glitch1TimeMax : 900, // set max time for glitch 1 elem
+                glitch2TimeMin : 10, // set min time for glitch 2 elem
+                glitch2TimeMax : 115, // set max time for glitch 2 elem
+			});
+
+		});
+	</script>
+
+</body>
+</html>
+
+
+
+
+
+
+
diff --git a/demo/img/mosh1.jpg b/demo/img/mosh1.jpg
diff --git a/src/mgGlitch.js b/src/mgGlitch.js
@@ -0,0 +1,231 @@
+    /*!
+ * mgGlitch : little jquery helper to glitch everything
+ * (c) 2016 Hadrien Mongouachon
+ * MIT Licensed.
+ *
+ * Author URI: http://hmongouachon.com
+ * Plugin URI: http://hmongouachon.com
+
+ * Version: 1.0.0
+ */
+
+
+;( function( $, window, document, undefined ) {
+
+	"use strict";
+
+		// Create the defaults once
+		var pluginName = "mgGlitch",
+			defaults = {
+				destroy : false,
+				// randomTime: true,
+				glitch: true,
+				scale: true,
+				blend : true,
+				blendModeType : 'hue',
+				glitch1TimeMin : 600,
+				glitch1TimeMax : 900,
+				glitch2TimeMin : 10,
+				glitch2TimeMax : 115,
+
+			};
+
+		// The actual plugin constructor
+		function Plugin ( element, options ) {
+
+			this.element = element;
+			this.settings = $.extend( {}, defaults, options );
+			this._defaults = defaults;
+			this._name = pluginName;
+			this.init();
+
+		}
+
+		// Avoid Plugin.prototype conflicts
+		$.extend( Plugin.prototype, {
+
+            // init plugin
+			init: function() {
+
+                // this.element
+                // this._defaults.propertyName = get the defaults options
+                // this.settings.propertyName = get options from plugin instance
+                this.glitch();
+
+			},
+
+            // public function
+			glitch: function() {
+
+                // element glitch
+				var el = this.element;
+                // set options as var to use in nested functions
+
+                // scale option : true or false
+				var scale = this.settings.scale;
+
+                // random time interval for first glitch elem : between min and max
+				var glitch1TimeMin = this.settings.glitch1TimeMin;
+				var glitch1TimeMax = this.settings.glitch1TimeMax;
+
+                // random time interval for second glitch elem : between min and max
+				var glitch2TimeMin = this.settings.glitch2TimeMin;
+				var glitch2TimeMax = this.settings.glitch2TimeMax;
+
+                // randomize number between min and max
+				function getRandomInt(min, max) {
+                    return Math.floor(Math.random() * (max - min + 1)) + min;
+                }
+
+                // destroy method : set true or false
+                if(this.settings.destroy === true) {
+
+                	// check if created elements exists and remove them
+                    if($(el).hasClass('el-front-1') || $(el).hasClass('front-3') || $(el).hasClass('back')){
+                	     $('.front-1, .front-3, back').remove();
+
+                    }
+                } 
+
+                else if(this.settings.destroy === false ) {
+
+                	// clone this.element insert back addclass el-back = static element
+                    var cloneEl = $(el).clone();
+                    cloneEl.insertBefore(el).addClass('back').css({'z-index': '0'});
+
+                    // blending elements : front-3
+                    if(this.settings.blend === true) { 
+
+                        // clone element insert front addclass el-front-3
+                        var cloneEl = $(el).clone();
+                        cloneEl.insertAfter(el).addClass('front-3').css({'z-index' : '3', 'mix-blend-mode' : this.settings.blendModeType}); // , 'mix-blend-mode': 'hard-light'
+                        blendElem();
+
+                    } 
+
+                    // glitching element : front-1, front-2
+                    if(this.settings.glitch === true) {
+
+                        // clone element insert front addclass el-front-1 = first glitch element
+                        var cloneEl = $(el).clone();
+                        cloneEl.insertAfter(el).addClass('front-2').css({'z-index' : '2'});
+
+                        // add class middle to elem
+                        $('.back').next().addClass('front-1');
+
+                        // call recursives functions with random timing apply
+                        glitch1(), glitch2();
+
+                    }
+
+                }
+
+                // first glitch instance with lower timing and no scale : apply to front-1
+                function glitch1() {
+
+                    var clipPos1 = getRandomInt(10, 1900);
+                    var clipPos2 = 9999;
+                    var clipPos3 = getRandomInt(10, 1300);
+                    var clipPos4 = 0;
+                    var leftValue = getRandomInt(0, 16);
+                    var rightValue = getRandomInt(0, 16);
+                    var randomTime = getRandomInt(glitch1TimeMin, glitch1TimeMax);
+
+                    // select front-1 selector : random clip, right and left values
+                    $(el).css({
+                    	'clip' : 'rect('+clipPos1+'px, '+clipPos2+'px, '+clipPos3+'px,' + clipPos4 +'px)' ,
+                    	'right' : rightValue,
+                        'left' : leftValue	
+                    });
+
+                    // set loop with random time
+                    setTimeout(glitch1, randomTime); 
+                }
+
+                // second glitch instance with higher timing + scale options : apply to front-2
+                function glitch2() {
+
+                    var clipPos1 = getRandomInt(10, 1900);
+                    var clipPos2 = 9999;
+                    var clipPos3 = getRandomInt(10, 1300);
+                    var clipPos4 = 0;
+                    var leftValue = getRandomInt(0, 40);
+                    var rightValue = getRandomInt(0, 40);
+                    var randomTime = getRandomInt(glitch2TimeMin, glitch2TimeMax);
+
+                    // check if scale option is active = true or not = false
+                    if(scale === true) { 
+                 	    // get random scale value between 0.9 and 1.1 with decimal
+                        var scaleValue = (Math.random() * (1.1 - 0.9) + 0.9).toFixed(2); // toFixed(n) where n = decimal
+                    } 
+                    else if(scale === false) { 
+                        // if false always set scale value to 1
+                 	    var scaleValue = 1;
+                    };
+
+                    // select front-2 selector : random clip, right, left and scale values
+                    $(el).next().css({
+                    	'clip' : 'rect('+clipPos1+'px, '+clipPos2+'px, '+clipPos3+'px,' + clipPos4 +'px)',
+                    	'left' : leftValue,
+                        'right' : rightValue,
+                        '-webkit-transform' : 'scale(' + scaleValue + ')',
+                        '-ms-transform' : 'scale(' + scaleValue + ')',
+                    	'transform' : 'scale(' + scaleValue + ')'
+                    });
+
+                    // set loop with random time
+                    setTimeout(glitch2, randomTime); 
+                }
+
+                // second glitch instance with higher timing + scale options + blend-mode : apply to front-3
+                function blendElem() {
+
+                    var clipPos1 = getRandomInt(10, 1900);
+                    var clipPos2 = 9999;
+                    var clipPos3 = getRandomInt(10, 1300);
+                    var clipPos4 = 0;
+                    var leftValue = getRandomInt(0, 40);
+                    var rightValue = getRandomInt(0, 40);
+                    var randomTime = getRandomInt(glitch2TimeMin, glitch2TimeMax);
+
+                    // check if scale option is active = true or not = false
+                    if(scale === true) { 
+                 	    // get random scale value between 0.9 and 1.1 with decimal
+                        var scaleValue = (Math.random() * (1.1 - 0.9) + 0.9).toFixed(2); // toFixed(n) where n = decimal
+                    } 
+                    else if(scale === false) { 
+                    	// if false always set scale value to 1
+                 	    var scaleValue = 1;
+                    };
+
+                    // select front-3 selector : random clip, right, left and scale values
+                    $(el).next().next().css({
+                    	'clip' : 'rect('+clipPos1+'px, '+clipPos2+'px, '+clipPos3+'px,' + clipPos4 +'px)',
+                    	'left' : leftValue,
+                        'right' : rightValue,
+                    	'-webkit-transform' : 'scale(' + scaleValue + ')',
+                        '-ms-transform' : 'scale(' + scaleValue + ')',
+                        'transform' : 'scale(' + scaleValue + ')'
+                    });
+
+                    // set loop with random time
+                    setTimeout(blendElem, randomTime); 
+                }
+			}
+		} );
+
+		// A really lightweight plugin wrapper around the constructor,
+		// preventing against multiple instantiations
+		$.fn[ pluginName ] = function( options ) {
+			return this.each( function() {
+				if ( !$.data( this, "plugin_" + pluginName ) ) {
+					$.data( this, "plugin_" +
+						pluginName, new Plugin( this, options ) );
+				}
+			} );
+		};
+
+} )( jQuery, window, document );
+
+
+
diff --git a/src/mgGlitch.min.js b/src/mgGlitch.min.js