基于背景颜色的堆叠菜单和社交媒体的颜色变化

Question

我试图根据div https://pithworks.com/

的背景复制此网站的汉堡包和社交媒体的颜色变化

滚动时，您可以看到它根据浅色和深色背景改变颜色。我尝试了几种选项，例如colourBrightness.js和background-check.js，但没有成功。

关于如何让他工作的任何想法。

由于

Answer 1

这是一个可能的解决方案：

var cursor = 0;
var direction = -1;
var fps = 15; // frames per second

// -0.25 ... 0 ... 0.25
//           ^
//         cursor

setInterval(function () {
  cursor += direction * 0.01;
  if (Math.abs(cursor) > 0.25) direction *= -1;
  document.body.style.background = makeGradient(cursor);
}, 1000 / fps);

function makeGradient (cursor) {
  var p1 = Math.round(cursor * 100);
  var p2 = Math.round((cursor + 1) * 100);
  return "linear-gradient(45deg, "
  + "#ff2200 " + p1 + "%, "
  + "#23548b " + p2 + "%"
  + ")";
}

html,body{padding:0;margin:0;height:100%;}

请参阅http://www.colorzilla.com/gradient-editor。