diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml deleted file mode 100644 index 954cd09..0000000 --- a/.github/FUNDING.yml +++ /dev/null @@ -1,3 +0,0 @@ -# These are supported funding model platforms - -github: codefog diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 02e9e9d..0000000 --- a/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -# PHPStorm -.idea \ No newline at end of file diff --git a/LICENSE b/LICENSE deleted file mode 100644 index 23db60e..0000000 --- a/LICENSE +++ /dev/null @@ -1,22 +0,0 @@ -The MIT License (MIT) - -Copyright (c) 2015 Codefog - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. - diff --git a/README.md b/README.md deleted file mode 100644 index 5586653..0000000 --- a/README.md +++ /dev/null @@ -1,34 +0,0 @@ -# Gradientify - -A simple jQuery plugin that provides CSS gradient transitions. - -Based on the script by Mike Byrne: - -http://opticalcortex.com/animating-css-gradients/ - -## Demo - -https://codefog.github.io/jquery-gradientify/ - -## Usage - -Here is an example of quick usage: - -```php -$('body').gradientify({ - gradients: [ - { start: [49,76,172], stop: [242,159,191] }, - { start: [255,103,69], stop: [240,154,241] }, - { start: [33,229,241], stop: [235,236,117] } - ] -}); -``` - -### Parameters: - -Name | Description | Required? | Default ----- | ----------- | -------- | ------- -gradients | An array of objects containing start and stop gradients in RGB values. | **required** | [] -angle | The gradient angle. The value is put directly in the CSS gradient definition. | optional | 0deg -fps | Frames per second. The higher the value the transition will be smoother, but it affects the performance! | optional | 60 -transition_time | Transition time between gradients in seconds. | optional | 8 \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..65ac817 --- /dev/null +++ b/index.html @@ -0,0 +1,35 @@ + + + + + + jQuery Gradientify plugin - demo + + + + + + + + + + +
+

jQuery Gradientify

+

A jQuery plugin that provides CSS gradient transitions.

+

Read more on GitHub

+
+ + + + \ No newline at end of file diff --git a/jquery.gradientify.js b/jquery.gradientify.js deleted file mode 100644 index 6610083..0000000 --- a/jquery.gradientify.js +++ /dev/null @@ -1,186 +0,0 @@ -/* 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 - * @author Kamil Kuzminski - * @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); \ No newline at end of file diff --git a/main.css b/main.css new file mode 100644 index 0000000..e7d78fa --- /dev/null +++ b/main.css @@ -0,0 +1,44 @@ +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +body { + color: #ffffff; + font: 18px/1.5 'Ubuntu', sans-serif; +} + +h1 { + margin-top: 0; + margin-bottom: 0.5em; +} + +p { + margin-top: 0; + margin-bottom: 2em; +} + +h1 { + font-size: 60px; + font-weight: bold; +} + +a { + color: #ffffff; + display: inline-block; + border: 1px solid #ffffff; + padding: 8px 16px; + text-decoration: none; +} + +#wrapper { + position: absolute; + top: 50%; + left: 50%; + margin-top: -130px; + margin-left: -300px; + height: 260px; + width: 600px; + text-align: center; +} \ No newline at end of file