├── .github └── FUNDING.yml ├── .gitignore ├── LICENSE ├── README.md ├── jquery.gradientify.js └── jquery.gradientify.min.js /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: codefog 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # PHPStorm 2 | .idea -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Codefog 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Gradientify 2 | 3 | A simple jQuery plugin that provides CSS gradient transitions. 4 | 5 | Based on the script by Mike Byrne: 6 | 7 | http://opticalcortex.com/animating-css-gradients/ 8 | 9 | ## Demo 10 | 11 | https://codefog.github.io/jquery-gradientify/ 12 | 13 | ## Usage 14 | 15 | Here is an example of quick usage: 16 | 17 | ```php 18 | $('body').gradientify({ 19 | gradients: [ 20 | { start: [49,76,172], stop: [242,159,191] }, 21 | { start: [255,103,69], stop: [240,154,241] }, 22 | { start: [33,229,241], stop: [235,236,117] } 23 | ] 24 | }); 25 | ``` 26 | 27 | ### Parameters: 28 | 29 | Name | Description | Required? | Default 30 | ---- | ----------- | -------- | ------- 31 | gradients | An array of objects containing start and stop gradients in RGB values. | **required** | [] 32 | angle | The gradient angle. The value is put directly in the CSS gradient definition. | optional | 0deg 33 | fps | Frames per second. The higher the value the transition will be smoother, but it affects the performance! | optional | 60 34 | transition_time | Transition time between gradients in seconds. | optional | 8 -------------------------------------------------------------------------------- /jquery.gradientify.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.8.3 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-cssgradients-prefixes 3 | */ 4 | ;window.Modernizr=function(a,b,c){function u(a){i.cssText=a}function v(a,b){return u(l.join(a+";")+(b||""))}function w(a,b){return typeof a===b}function x(a,b){return!!~(""+a).indexOf(b)}function y(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:w(f,"function")?f.bind(d||b):f}return!1}var d="2.8.3",e={},f=b.documentElement,g="modernizr",h=b.createElement(g),i=h.style,j,k={}.toString,l=" -webkit- -moz- -o- -ms- ".split(" "),m={},n={},o={},p=[],q=p.slice,r,s={}.hasOwnProperty,t;!w(s,"undefined")&&!w(s.call,"undefined")?t=function(a,b){return s.call(a,b)}:t=function(a,b){return b in a&&w(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=q.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(q.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(q.call(arguments)))};return e}),m.cssgradients=function(){var a="background-image:",b="gradient(linear,left top,right bottom,from(#9f9),to(white));",c="linear-gradient(left top,#9f9, white);";return u((a+"-webkit- ".split(" ").join(b+a)+l.join(c+a)).slice(0,-a.length)),x(i.backgroundImage,"gradient")};for(var z in m)t(m,z)&&(r=z.toLowerCase(),e[r]=m[z](),p.push((e[r]?"":"no-")+r));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)t(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof enableClasses!="undefined"&&enableClasses&&(f.className+=" "+(b?"":"no-")+a),e[a]=b}return e},u(""),h=j=null,e._version=d,e._prefixes=l,e}(this,this.document); 5 | 6 | /** 7 | * jQuery Gradientify plugin 1.0.0 8 | * 9 | * Provides animating CSS gradients. 10 | * Based on http://opticalcortex.com/animating-css-gradients/ by Mike Byrne. 11 | * 12 | * @author Codefog 13 | * @author Kamil Kuzminski 14 | * @license MIT License 15 | * @see http://opticalcortex.com/animating-css-gradients/ 16 | */ 17 | (function ($, window, document, undefined) { 18 | 19 | 'use strict'; 20 | 21 | // Create the defaults once 22 | var pluginName = 'gradientify', 23 | defaults = { 24 | angle: '0deg', // Gradient angle 25 | fps: 60, // Frames per second 26 | gradients: {}, // Gradients 27 | transition_time: 8 // Transition time 28 | }; 29 | 30 | // The actual plugin constructor 31 | function Plugin(element, options) { 32 | this.element = element; 33 | this.settings = $.extend({}, defaults, options); 34 | this._defaults = defaults; 35 | this._name = pluginName; 36 | this.init(); 37 | } 38 | 39 | // Avoid Plugin.prototype conflicts 40 | $.extend(Plugin.prototype, { 41 | init: function () { 42 | // Return if the browser does not support CSS gradients 43 | if (!Modernizr.cssgradients) { 44 | return; 45 | } 46 | 47 | // Where we are in the gradients array 48 | this.currentIndex = 0; 49 | 50 | // What index of the gradients array is next 51 | this.nextIndex = 1; 52 | 53 | // Steps counter 54 | this.steps_count = 0; 55 | 56 | // Total amount of steps 57 | this.steps_total = Math.round(this.settings.transition_time * this.settings.fps); 58 | 59 | // How much to alter each rgb value 60 | this.rgb_steps = { 61 | start: [0, 0, 0], 62 | stop: [0, 0, 0] 63 | }; 64 | 65 | // The current rgb values, gets altered by rgb steps on each interval 66 | this.rgb_values = { 67 | start: [0, 0, 0], 68 | stop: [0, 0, 0] 69 | }; 70 | 71 | // For looping through adding styles 72 | this.prefixes = ['-webkit-', '-moz-', '-o-', '-ms-', '']; 73 | 74 | // Color helpers 75 | this.color1 = null; 76 | this.color2 = null; 77 | 78 | // Initial step calculation 79 | this.calculateSteps(); 80 | 81 | // Launch the timer 82 | setInterval(function() { 83 | this.updateGradient.apply(this); 84 | }.bind(this), Math.round(1000 / this.settings.fps)); 85 | }, 86 | 87 | /** 88 | * Set next current and next index of gradients array 89 | * 90 | * @param {int} num 91 | * 92 | * @returns {int} 93 | */ 94 | setNext: function (num) { 95 | return (num + 1 < this.settings.gradients.length) ? num + 1 : 0; 96 | }, 97 | 98 | /** 99 | * Work out how big each rgb step is 100 | * 101 | * @param {int} a 102 | * @param {int} b 103 | * 104 | * @return {int} 105 | */ 106 | calculateStepSize: function (a, b) { 107 | return (a - b) / this.steps_total; 108 | }, 109 | 110 | /** 111 | * Populate the rgb_values and rgb_steps objects 112 | */ 113 | calculateSteps: function () { 114 | for (var key in this.rgb_values) { 115 | if (this.rgb_values.hasOwnProperty(key)) { 116 | for (var i = 0; i < 3; i++) { 117 | this.rgb_values[key][i] = this.settings.gradients[this.currentIndex][key][i]; 118 | this.rgb_steps[key][i] = this.calculateStepSize(this.settings.gradients[this.nextIndex][key][i], this.rgb_values[key][i]); 119 | } 120 | } 121 | } 122 | }, 123 | 124 | /** 125 | * Update current RGB values, update DOM element with new CSS background 126 | */ 127 | updateGradient: function () { 128 | var i; 129 | 130 | // Update the current RGB values 131 | for (var key in this.rgb_values) { 132 | if (this.rgb_values.hasOwnProperty(key)) { 133 | for (i = 0; i < 3; i++) { 134 | this.rgb_values[key][i] += this.rgb_steps[key][i]; 135 | } 136 | } 137 | } 138 | 139 | // Generate CSS RGB values 140 | var t_color1 = 'rgb(' + (this.rgb_values.start[0] | 0) + ',' + (this.rgb_values.start[1] | 0) + ',' + (this.rgb_values.start[2] | 0) + ')'; 141 | var t_color2 = 'rgb(' + (this.rgb_values.stop[0] | 0) + ',' + (this.rgb_values.stop[1] | 0) + ',' + (this.rgb_values.stop[2] | 0) + ')'; 142 | 143 | // Has anything changed on this iteration? 144 | if (t_color1 != this.color1 || t_color2 != this.color2) { 145 | 146 | // Update cols strings 147 | this.color1 = t_color1; 148 | this.color2 = t_color2; 149 | 150 | // Update DOM element style attribute 151 | $(this.element).css('background-image', '-webkit-gradient(linear, left bottom, right top, from(' + this.color1 + '), to(' + this.color2 + '))'); 152 | 153 | for (i = 0; i < 4; i++) { 154 | $(this.element).css('background-image', this.prefixes[i] + 'linear-gradient(' + this.settings.angle + ', ' + this.color1 + ', ' + this.color2 + ')'); 155 | } 156 | } 157 | 158 | // We did another step 159 | this.steps_count++; 160 | 161 | // Did we do too many steps? 162 | if (this.steps_count > this.steps_total) { 163 | // Reset steps count 164 | this.steps_count = 0; 165 | 166 | // Set new indexes 167 | this.currentIndex = this.setNext(this.currentIndex); 168 | this.nextIndex = this.setNext(this.nextIndex); 169 | 170 | // Calculate steps 171 | this.calculateSteps(); 172 | } 173 | } 174 | }); 175 | 176 | // A really lightweight plugin wrapper around the constructor, 177 | // preventing against multiple instantiations 178 | $.fn[pluginName] = function (options) { 179 | return this.each(function () { 180 | if (!$.data(this, 'plugin_' + pluginName)) { 181 | $.data(this, 'plugin_' + pluginName, new Plugin(this, options)); 182 | } 183 | }); 184 | }; 185 | 186 | })(jQuery, window, document); -------------------------------------------------------------------------------- /jquery.gradientify.min.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.8.3 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-cssgradients-prefixes 3 | */ 4 | window.Modernizr=function(Z,Y,X){function F(b){R.cssText=b}function E(d,c){return F(O.join(d+";")+(c||""))}function D(d,c){return typeof d===c}function C(d,c){return !!~(""+d).indexOf(c)}function B(g,c,j){for(var i in g){var h=c[g[i]];if(h!==X){return j===!1?g[i]:D(h,"function")?h.bind(j||c):h}}return !1}var W="2.8.3",V={},U=Y.documentElement,T="modernizr",S=Y.createElement(T),R=S.style,Q,P={}.toString,O=" -webkit- -moz- -o- -ms- ".split(" "),N={},M={},L={},K=[],J=K.slice,I,H={}.hasOwnProperty,G;!D(H,"undefined")&&!D(H.call,"undefined")?G=function(d,c){return H.call(d,c)}:G=function(d,c){return c in d&&D(d.constructor.prototype[c],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(a){var h=this;if(typeof h!="function"){throw new TypeError}var g=J.call(arguments,1),f=function(){if(this instanceof f){var b=function(){};b.prototype=h.prototype;var d=new b,c=h.apply(d,g.concat(J.call(arguments)));return Object(c)===c?c:d}return h.apply(a,g.concat(J.call(arguments)))};return f}),N.cssgradients=function(){var e="background-image:",d="gradient(linear,left top,right bottom,from(#9f9),to(white));",f="linear-gradient(left top,#9f9, white);";return F((e+"-webkit- ".split(" ").join(d+e)+O.join(f+e)).slice(0,-e.length)),C(R.backgroundImage,"gradient")};for(var A in N){G(N,A)&&(I=A.toLowerCase(),V[I]=N[A](),K.push((V[I]?"":"no-")+I))}return V.addTest=function(e,c){if(typeof e=="object"){for(var f in e){G(e,f)&&V.addTest(f,e[f])}}else{e=e.toLowerCase();if(V[e]!==X){return V}c=typeof c=="function"?c():c,typeof enableClasses!="undefined"&&enableClasses&&(U.className+=" "+(c?"":"no-")+e),V[e]=c}return V},F(""),S=Q=null,V._version=W,V._prefixes=O,V}(this,this.document); 5 | /** 6 | * jQuery Gradientify plugin 1.0.0 7 | * 8 | * Provides animating CSS gradients. 9 | * Based on http://opticalcortex.com/animating-css-gradients/ by Mike Byrne. 10 | * 11 | * @author Codefog 12 | * @author Kamil Kuzminski 13 | * @license MIT License 14 | * @see http://opticalcortex.com/animating-css-gradients/ 15 | */ 16 | (function(e,c,a,g){var d="gradientify",f={angle:"0deg",fps:60,gradients:{},transition_time:8};function b(i,h){this.element=i;this.settings=e.extend({},f,h);this._defaults=f;this._name=d;this.init()}e.extend(b.prototype,{init:function(){if(!Modernizr.cssgradients){return}this.currentIndex=0;this.nextIndex=1;this.steps_count=0;this.steps_total=Math.round(this.settings.transition_time*this.settings.fps);this.rgb_steps={start:[0,0,0],stop:[0,0,0]};this.rgb_values={start:[0,0,0],stop:[0,0,0]};this.prefixes=["-webkit-","-moz-","-o-","-ms-",""];this.color1=null;this.color2=null;this.calculateSteps();setInterval(function(){this.updateGradient.apply(this)}.bind(this),Math.round(1000/this.settings.fps))},setNext:function(h){return(h+1this.steps_total){this.steps_count=0;this.currentIndex=this.setNext(this.currentIndex);this.nextIndex=this.setNext(this.nextIndex);this.calculateSteps()}}});e.fn[d]=function(h){return this.each(function(){if(!e.data(this,"plugin_"+d)){e.data(this,"plugin_"+d,new b(this,h))}})}})(jQuery,window,document); --------------------------------------------------------------------------------