While tinkering with the webpage background today, I made the entire website transparent, which made it possible to create a dynamic background. I first thought of using CSS + jQuery, but after messing around for quite a while, I discovered that it was incompatible with the Robin theme. One of the two had to be abandoned, and naturally, I gave up on the background.
Then I thought about it and decided to share the finished background for everyone to use as a reference.
HTML Code
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script src="gradientify.js"></script>
<link rel="stylesheet" href="main.css">
<script>
$(document).ready(function() {
$("body").gradientify({
gradients: [
{ start: [49, 76, 172], stop: [242, 159, 191] },
{ start: [33, 229, 241], stop: [235, 236, 117] }
]
});
});
</script>
CSS Code
* { -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; }
#wrapper { position: absolute; top: 50%; left: 50%; margin-top: -130px; margin-left: -300px; height: 260px; width: 600px; text-align: center; }
jQuery Code
;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);
(function($, window, document, undefined) {
'use strict';
var pluginName = 'gradientify', defaults = {
angle: '0deg', fps: 60, gradients: {}, transition_time: 8
};
function Plugin(element, options) {
this.element = element;
this.settings = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.init();
}
$.extend(Plugin.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(10 / this.settings.fps));
},
setNext: function(num) {
return (num + 1 < this.settings.gradients.length) ? num + 1 : 0;
},
calculateStepSize: function(a, b) {
return (a - b) / this.steps_total;
},
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]);
}
}
}
},
updateGradient: function() {
var i;
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];
}
}
}
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) + ')';
if (t_color1 !== this.color1 || t_color2 !== this.color2) {
this.color1 = t_color1;
this.color2 = t_color2;
$(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 + ')');
}
}
this.steps_count++;
if (this.steps_count > this.steps_total) {
this.steps_count = 0;
this.currentIndex = this.setNext(this.currentIndex);
this.nextIndex = this.setNext(this.nextIndex);
this.calculateSteps();
}
}
});
$.fn[pluginName] = function(options) {
return this.each(function() {
if (!$.data(this, 'plugin_' + pluginName)) {
$.data(this, '
plugin_' + pluginName, new Plugin(this, options));
}
});
};
})(jQuery, window, document);
How to Use
Write the CSS code into the main.css file, the jQuery code into the gradientify.js file, and place the HTML code in index.html. Of course, you will also need to address compatibility issues!
Screenshot
