Colorido Update v2.0.0

Author: parassharmaa

README.md

@@ -38,36 +38,42 @@ $ npm install colorido.js
  
 ```javascript
     var config = {
-	opacity: 0.7,
+	opacity: 0.5, // background opacity for colorido-o (0-1)
 	choice: [
 		'rgb(138, 43, 43)',
 		'rgb(98, 162, 40)',
 		'rgb(40, 162, 162)', 
 		'rgb(40, 66, 162)', 
-		'rgb(121, 40, 162)', 
+		'rgb(121, 40, 162)', //Color array for random colors, add color in rgb for more
 		'rgb(121, 40, 162)', 
 		'rgb(40, 100, 162)', 
 		'rgb(230, 74, 25)'
 	], 
-	autoChange: true, 
-	autoDuration: 5,  
-	animationDuration: 0.3,  
-	animationType:"ease-in-out", 
-	chromeTab: true 
+	gradMix : "#d6d26f", //any color value or type random,  update : grad mix color
+	autoChange: true, // Auto Color Change Settings true = yes, false= no
+	autoDuration: 4,  // Auto Color Change Duration in Seconds
+	animationDuration: 0.3,  //Color Changing Animation Duration
+	animationType:"ease-in-out", //Animation Type
+	chromeTab: true  // Color Change Settings for chrome Tabs on android, wp and ios
 }
 ```
 * `opacity: Background opacity for colorido-o (0-1)`
 * `choice: Array of colors.`
 * `autoChange: true|False, Auto Color Change Settings` 
 * `autoDuration: Auto Color Change Duration in Seconds`
+* `gradMix: Optional mixing color for gradient bg`
 * `animationDuration:Color Changing Animation Duration`
 * `animationType:Animation Type`
 * `chromeTab: Color Change Settings for chrome Tabs on android, wp and ios`
 
-3.Colorido.js simply works upon 3 css classes:
+3.Colorido.js simply works upon 7 css classes:
 * `colorido: Applies Dynamic background color`
 * `colorido-o: Applies background color with opacity`
 * `colorido-t: Applies dynamic Text-color`
+* `colorido-gr: Applies dynamic Radial Gradient`
+* `colorido-gl: Applies dynamic linear Gradient`
+* `colorido-gd: Applies dynamic diagonal Gradient`
+* `colorido-gh: Applies dynamic Horizontal Gradient`
 
 **Applies these classes on your webcomponents to see magic**
 

colorido.js

@@ -1,22 +1,41 @@
 target1 = document.getElementsByClassName('colorido');
 target2 = document.getElementsByClassName('colorido-o');
 target3 = document.getElementsByClassName('colorido-t');
+target4 = document.getElementsByClassName('colorido-gr'); 
+target5 = document.getElementsByClassName('colorido-gl'); 
+target6 = document.getElementsByClassName('colorido-gd');
+target7 = document.getElementsByClassName('colorido-gh');
+
 max = config.choice.length;
 time = config.autoDuration * 1000;
 trans = 1-config.opacity;
 animD = " "+config.animationDuration+"s"+" ";
 animT = config.animationType;
+mix = config.gradMix;
+
+function randInt(max, min) {
+	result = parseInt(Math.random() * (max - min) + min);
+	return result;
+}
 
 function renc() {
 	rand = parseInt(Math.random() * (max - 0) + 0);
+	if (config.gradMix==="random") {
+		mix  = "rgb("+randInt(255,0)+ ","+  randInt(255,0)+ "," + randInt(255,0)+")";
+	}
+
+	else {
+		mix = config.gradMix;
+	}
+	
 	color = config.choice[rand];
 	conv = color.replace('b', 'ba');
 	trans_color = conv.replace(')', "," + trans);
 	var i;
 
 	for (i = 0; i < target1.length; i++) {
 		target1[i].style.backgroundColor = color;
-		target1[i].style.color = "#fff";
+		target1[i].style.color ="#fff";
 		target1[i].style.transition = "background-color"+animD + animT;
 	}
 
@@ -29,6 +48,33 @@ function renc() {
 		target3[i].style.color = color;
 		target3[i].style.transition = "color"+animD+ animT;
 	}
+	
+	for (i = 0; i < target4.length; i++) {
+		target4[i].style.color = "#fff";
+		target4[i].style.background= "-webkit-radial-gradient("+color+","+mix+")";
+		target4[i].style.background= "radial-gradient("+color+", " + mix+")";
+		target4[i].style.transition = "all"+animD+ animT;
+	}
+	for (i = 0; i < target5.length; i++) {
+		target5[i].style.color = "#fff";
+		target5[i].style.background= "-webkit-linear-gradient(10grad, "+color+","+mix+")";
+		target5[i].style.background= "linear-gradient(10grad, "+color+", " +mix+")";
+		target5[i].style.transition = "all"+animD+ animT;
+	}
+	for (i = 0; i < target6.length; i++) {
+		target6[i].style.color = "#fff";
+		target6[i].style.background= "-webkit-linear-gradient(120grad, "+color+","+mix+")";
+		target6[i].style.background= "linear-gradient(120grad, "+color+", " + mix+")";
+		target6[i].style.transition = "all"+animD+ animT;
+	}
+	for (i = 0; i < target7.length; i++) {
+		target7[i].style.color = "#fff";
+		target7[i].style.background= "-webkit-linear-gradient(500grad, "+color+","+mix+")";
+		target7[i].style.background= "linear-gradient(500grad, "+color+", " + mix+")";
+		target7[i].style.transition = "all"+animD+ animT;
+	}
+	
+	
 
 };
 if (config.autoChange) {
@@ -49,4 +95,4 @@ if (config.chromeTab) {
 	metaIn("theme-color");
 	metaIn("msapplication-navbutton-color");
 	metaIn("apple-mobile-web-app-status-bar-style");
-}
+}

colorido.min.js

@@ -1,6 +1,6 @@
 {
   "name": "colorido.js",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "Colorido.Js is a awesome , flexible and cross-browser dynamically color changing tool for web projects.",
   "main": "colorido.js",
   "scripts": {

package.json

@@ -1,22 +1,41 @@
 target1 = document.getElementsByClassName('colorido');
 target2 = document.getElementsByClassName('colorido-o');
 target3 = document.getElementsByClassName('colorido-t');
+target4 = document.getElementsByClassName('colorido-gr'); 
+target5 = document.getElementsByClassName('colorido-gl'); // linear gradient
+target6 = document.getElementsByClassName('colorido-gd');
+target7 = document.getElementsByClassName('colorido-gh');
+
 max = config.choice.length;
 time = config.autoDuration * 1000;
 trans = 1-config.opacity;
 animD = " "+config.animationDuration+"s"+" ";
 animT = config.animationType;
+mix = config.gradMix;
+
+function randInt(max, min) {
+	result = parseInt(Math.random() * (max - min) + min);
+	return result;
+}
 
 function renc() {
 	rand = parseInt(Math.random() * (max - 0) + 0);
+	if (config.gradMix==="random") {
+		mix  = "rgb("+randInt(255,0)+ ","+  randInt(255,0)+ "," + randInt(255,0)+")";
+	}
+
+	else {
+		mix = config.gradMix;
+	}
+	
 	color = config.choice[rand];
 	conv = color.replace('b', 'ba');
 	trans_color = conv.replace(')', "," + trans);
 	var i;
 
 	for (i = 0; i < target1.length; i++) {
 		target1[i].style.backgroundColor = color;
-		target1[i].style.color = "#fff";
+		target1[i].style.color ="#fff";
 		target1[i].style.transition = "background-color"+animD + animT;
 	}
 
@@ -29,6 +48,33 @@ function renc() {
 		target3[i].style.color = color;
 		target3[i].style.transition = "color"+animD+ animT;
 	}
+	
+	for (i = 0; i < target4.length; i++) {
+		target4[i].style.color = "#fff";
+		target4[i].style.background= "-webkit-radial-gradient("+color+","+mix+")";
+		target4[i].style.background= "radial-gradient("+color+", " + mix+")";
+		target4[i].style.transition = "all"+animD+ animT;
+	}
+	for (i = 0; i < target5.length; i++) {
+		target5[i].style.color = "#fff";
+		target5[i].style.background= "-webkit-linear-gradient(10grad, "+color+","+mix+")";
+		target5[i].style.background= "linear-gradient(10grad, "+color+", " +mix+")";
+		target5[i].style.transition = "all"+animD+ animT;
+	}
+	for (i = 0; i < target6.length; i++) {
+		target6[i].style.color = "#fff";
+		target6[i].style.background= "-webkit-linear-gradient(120grad, "+color+","+mix+")";
+		target6[i].style.background= "linear-gradient(120grad, "+color+", " + mix+")";
+		target6[i].style.transition = "all"+animD+ animT;
+	}
+	for (i = 0; i < target7.length; i++) {
+		target7[i].style.color = "#fff";
+		target7[i].style.background= "-webkit-linear-gradient(500grad, "+color+","+mix+")";
+		target7[i].style.background= "linear-gradient(500grad, "+color+", " + mix+")";
+		target7[i].style.transition = "all"+animD+ animT;
+	}
+	
+	
 
 };
 if (config.autoChange) {
@@ -49,4 +95,4 @@ if (config.chromeTab) {
 	metaIn("theme-color");
 	metaIn("msapplication-navbutton-color");
 	metaIn("apple-mobile-web-app-status-bar-style");
-}
+}

src/colorido.js

@@ -1,5 +1,5 @@
 var config = {
-	opacity: 0.7, // background opacity for colorido-o (0-1)
+	opacity: 0.5, // background opacity for colorido-o (0-1)
 	choice: [
 		'rgb(138, 43, 43)',
 		'rgb(98, 162, 40)',
@@ -10,9 +10,10 @@ var config = {
 		'rgb(40, 100, 162)', 
 		'rgb(230, 74, 25)'
 	], 
+	gradMix : "#d6d26f", //any color value or type random,  update : grad mix color
 	autoChange: true, // Auto Color Change Settings true = yes, false= no
-	autoDuration: 5,  // Auto Color Change Duration in Seconds
-	animationDuration: 0.6,  //Color Changing Animation Duration
+	autoDuration: 4,  // Auto Color Change Duration in Seconds
+	animationDuration: 0.3,  //Color Changing Animation Duration
 	animationType:"ease-in-out", //Animation Type
 	chromeTab: true  // Color Change Settings for chrome Tabs on android, wp and ios
 }