Skip to content

Instantly share code, notes, and snippets.

@arudmin arudmin/fade-gradient.js
Last active Aug 29, 2015

Embed
What would you like to do?
js-fade-gradient
function updateGradient() {
var a = colors[colorIndices[0]],
b = colors[colorIndices[1]],
c = colors[colorIndices[2]],
d = colors[colorIndices[3]],
e = 1 - step,
f = Math.round(e * a[0] + step * b[0]),
g = Math.round(e * a[1] + step * b[1]),
h = Math.round(e * a[2] + step * b[2]),
i = "#" + (f << 16 | g << 8 | h).toString(16),
j = Math.round(e * c[0] + step * d[0]),
k = Math.round(e * c[1] + step * d[1]),
l = Math.round(e * c[2] + step * d[2]),
m = "#" + (j << 16 | k << 8 | l).toString(16);
$gradientContainer.css({
background: "-webkit-gradient(linear, left top, right top, from(" + i + "), to(" + m + "))"
}).css({
background: "-moz-linear-gradient(left, " + i + " 0%, " + m + " 100%)"
}), step += gradientSpeed, step >= 1 && (step %= 1, colorIndices[0] = colorIndices[1], colorIndices[2] = colorIndices[3], colorIndices[1] = (colorIndices[1] + Math.floor(1 + Math.random() * (colors.length - 1))) % colors.length, colorIndices[3] = (colorIndices[3] + Math.floor(1 + Math.random() * (colors.length - 1))) % colors.length)
}
var colors = new Array([62, 35, 255], [60, 255, 60], [255, 35, 98], [45, 175, 230], [255, 0, 255], [255, 128, 0]),
step = 0,
colorIndices = [0, 1, 2, 3],
gradientSpeed = .001,
$gradientContainer = $('__CONTAINER__');
setInterval(updateGradient, 100);
@arudmin

This comment has been minimized.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.