Question

我一直在尝试不同的选项来制作动画渐变页面背景，但页面的性能很糟糕。这导致我的幻灯片JS菜单和菜单动画出现延迟。我尝试了渐变的JS版本，仅限CSS版本，但仍然没有运气。我尝试了这个建议CSS performance relative to translateZ(0)，但这也没有用。

是否有任何解决方案可以制作动画页面背景渐变而不会影响页面其余部分的性能？这在Chrome和Safari中尤其糟糕，但Firefox似乎更好地处理它。

这是我的测试网站https://stacylauren-wp-stacymoorhead.c9users.io/，请原谅我没有格式化，我只是开始布局。这是我对项目https://github.com/stacymoorhead/portfolio-wordpress

的回购

这就是我的javascript看起来像是一个ID：

应用于body元素

  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);

有没有解决方案？我是Web开发的新手，也是WordPress开发的新手，所以我只是在玩我的投资组合来尝试学习东西。

Javascript动画渐变导致Javascript菜单慢慢反应WordPress

0 个答案: