186 lines
7.6 KiB
JavaScript
186 lines
7.6 KiB
JavaScript
|
/* Modernizr 2.8.3 (Custom Build) | MIT & BSD
|
||
|
|
* Build: http://modernizr.com/download/#-cssgradients-prefixes
|
||
|
|
*/
|
||
|
|
;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);
|
||
|
|
|
||
|
|
/**
|
||
|
|
* jQuery Gradientify plugin 1.0.0
|
||
|
|
*
|
||
|
|
* Provides animating CSS gradients.
|
||
|
|
* Based on http://opticalcortex.com/animating-css-gradients/ by Mike Byrne.
|
||
|
|
*
|
||
|
|
* @author Codefog <http://codefog.pl>
|
||
|
|
* @author Kamil Kuzminski <kamil.kuzminski@codefog.pl>
|
||
|
|
* @license MIT License
|
||
|
|
* @see http://opticalcortex.com/animating-css-gradients/
|
||
|
|
*/
|
||
|
|
(function ($, window, document, undefined) {
|
||
|
|
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
// Create the defaults once
|
||
|
|
var pluginName = 'gradientify',
|
||
|
|
defaults = {
|
||
|
|
angle: '0deg', // Gradient angle
|
||
|
|
fps: 60, // Frames per second
|
||
|
|
gradients: {}, // Gradients
|
||
|
|
transition_time: 8 // Transition time
|
||
|
|
};
|
||
|
|
|
||
|
|
// 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: function () {
|
||
|
|
// Return if the browser does not support CSS gradients
|
||
|
|
if (!Modernizr.cssgradients) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Where we are in the gradients array
|
||
|
|
this.currentIndex = 0;
|
||
|
|
|
||
|
|
// What index of the gradients array is next
|
||
|
|
this.nextIndex = 1;
|
||
|
|
|
||
|
|
// Steps counter
|
||
|
|
this.steps_count = 0;
|
||
|
|
|
||
|
|
// Total amount of steps
|
||
|
|
this.steps_total = Math.round(this.settings.transition_time * this.settings.fps);
|
||
|
|
|
||
|
|
// How much to alter each rgb value
|
||
|
|
this.rgb_steps = {
|
||
|
|
start: [0, 0, 0],
|
||
|
|
stop: [0, 0, 0]
|
||
|
|
};
|
||
|
|
|
||
|
|
// The current rgb values, gets altered by rgb steps on each interval
|
||
|
|
this.rgb_values = {
|
||
|
|
start: [0, 0, 0],
|
||
|
|
stop: [0, 0, 0]
|
||
|
|
};
|
||
|
|
|
||
|
|
// For looping through adding styles
|
||
|
|
this.prefixes = ['-webkit-', '-moz-', '-o-', '-ms-', ''];
|
||
|
|
|
||
|
|
// Color helpers
|
||
|
|
this.color1 = null;
|
||
|
|
this.color2 = null;
|
||
|
|
|
||
|
|
// Initial step calculation
|
||
|
|
this.calculateSteps();
|
||
|
|
|
||
|
|
// Launch the timer
|
||
|
|
setInterval(function() {
|
||
|
|
this.updateGradient.apply(this);
|
||
|
|
}.bind(this), Math.round(1000 / this.settings.fps));
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Set next current and next index of gradients array
|
||
|
|
*
|
||
|
|
* @param {int} num
|
||
|
|
*
|
||
|
|
* @returns {int}
|
||
|
|
*/
|
||
|
|
setNext: function (num) {
|
||
|
|
return (num + 1 < this.settings.gradients.length) ? num + 1 : 0;
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Work out how big each rgb step is
|
||
|
|
*
|
||
|
|
* @param {int} a
|
||
|
|
* @param {int} b
|
||
|
|
*
|
||
|
|
* @return {int}
|
||
|
|
*/
|
||
|
|
calculateStepSize: function (a, b) {
|
||
|
|
return (a - b) / this.steps_total;
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Populate the rgb_values and rgb_steps objects
|
||
|
|
*/
|
||
|
|
calculateSteps: function () {
|
||
|
|
for (var key in this.rgb_values) {
|
||
|
|
if (this.rgb_values.hasOwnProperty(key)) {
|
||
|
|
for (var i = 0; i < 3; i++) {
|
||
|
|
this.rgb_values[key][i] = this.settings.gradients[this.currentIndex][key][i];
|
||
|
|
this.rgb_steps[key][i] = this.calculateStepSize(this.settings.gradients[this.nextIndex][key][i], this.rgb_values[key][i]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Update current RGB values, update DOM element with new CSS background
|
||
|
|
*/
|
||
|
|
updateGradient: function () {
|
||
|
|
var i;
|
||
|
|
|
||
|
|
// Update the current RGB values
|
||
|
|
for (var key in this.rgb_values) {
|
||
|
|
if (this.rgb_values.hasOwnProperty(key)) {
|
||
|
|
for (i = 0; i < 3; i++) {
|
||
|
|
this.rgb_values[key][i] += this.rgb_steps[key][i];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Generate CSS RGB values
|
||
|
|
var t_color1 = 'rgb(' + (this.rgb_values.start[0] | 0) + ',' + (this.rgb_values.start[1] | 0) + ',' + (this.rgb_values.start[2] | 0) + ')';
|
||
|
|
var t_color2 = 'rgb(' + (this.rgb_values.stop[0] | 0) + ',' + (this.rgb_values.stop[1] | 0) + ',' + (this.rgb_values.stop[2] | 0) + ')';
|
||
|
|
|
||
|
|
// Has anything changed on this iteration?
|
||
|
|
if (t_color1 != this.color1 || t_color2 != this.color2) {
|
||
|
|
|
||
|
|
// Update cols strings
|
||
|
|
this.color1 = t_color1;
|
||
|
|
this.color2 = t_color2;
|
||
|
|
|
||
|
|
// Update DOM element style attribute
|
||
|
|
$(this.element).css('background-image', '-webkit-gradient(linear, left bottom, right top, from(' + this.color1 + '), to(' + this.color2 + '))');
|
||
|
|
|
||
|
|
for (i = 0; i < 4; i++) {
|
||
|
|
$(this.element).css('background-image', this.prefixes[i] + 'linear-gradient(' + this.settings.angle + ', ' + this.color1 + ', ' + this.color2 + ')');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// We did another step
|
||
|
|
this.steps_count++;
|
||
|
|
|
||
|
|
// Did we do too many steps?
|
||
|
|
if (this.steps_count > this.steps_total) {
|
||
|
|
// Reset steps count
|
||
|
|
this.steps_count = 0;
|
||
|
|
|
||
|
|
// Set new indexes
|
||
|
|
this.currentIndex = this.setNext(this.currentIndex);
|
||
|
|
this.nextIndex = this.setNext(this.nextIndex);
|
||
|
|
|
||
|
|
// Calculate steps
|
||
|
|
this.calculateSteps();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 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);
|