I've been trying different options to make an animated gradient page background but the performance of the page just sucks. It's causing a delay in my slide out JS menu and menu animations. I tried a JS version of the gradient, a CSS only version and still no luck. I tried this suggestion CSS performance relative to translateZ(0) and that didn't work either.
Are there any solutions to make an animated page background gradient that does not hurt the performance of the rest of the page? It's especially bad in Chrome and Safari but Firefox seems to handle it better.
Here is my testing site https://stacylauren-wp-stacymoorhead.c9users.io/ please excuse the lack of formatting, I'm just getting started on the layout. Here's my repo for the project https://github.com/stacymoorhead/portfolio-wordpress
This is what my javascript looks like that is applied to the body element as an ID:
var colors = new Array(
[252,238,33],
[217,224,33],
[140,198,63],
[0,176,176],
[147,39,143],
[212,20,90]);
var step = 0;
//color table indices for:
// current color left
// next color left
// current color right
// next color right
var colorIndices = [0,1,2,3];
//transition speed
var gradientSpeed = 0.002;
function updateGradient()
{
if ( $===undefined ) return;
var c0_0 = colors[colorIndices[0]];
var c0_1 = colors[colorIndices[1]];
var c1_0 = colors[colorIndices[2]];
var c1_1 = colors[colorIndices[3]];
var istep = 1 - step;
var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
var color1 = "rgb("+r1+","+g1+","+b1+")";
var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
var color2 = "rgb("+r2+","+g2+","+b2+")";
$('#gradient').css({
background: "-webkit-gradient(linear, left top, right bottom, from("+color1+"), to("+color2+"))"}).css({
background: "-moz-linear-gradient(left top, "+color1+" 0%, "+color2+" 100%)"});
step += gradientSpeed;
if ( step >= 1 )
{
step %= 1;
colorIndices[0] = colorIndices[1];
colorIndices[2] = colorIndices[3];
//pick two new target color indices
//do not pick the same as the current one
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;
}
}
setInterval(updateGradient,10);
Is there even a solution? I am new to web development, and new to WordPress development so I'm just playing around on my portfolio to try and learn things.
