基于页面滚动动态更改文本颜色(作为线性渐变)

<p id="scrolling-text">这是一个滚动的文本示例。</p>

#scrolling-text {
  background: linear-gradient(to right, red, blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

window.addEventListener('scroll', function() {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
  var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
  var scrollPercentage = (scrollTop / (scrollHeight - windowHeight)) * 100;

  var startColor = [255, 0, 0];  // 起始颜色，红色
  var endColor = [0, 0, 255];    // 结束颜色，蓝色

  var currentColor = startColor.map(function(channel, index) {
    var delta = endColor[index] - channel;
    return Math.round(channel + (delta * scrollPercentage / 100));
  });

  var textColor = 'rgb(' + currentColor.join(',') + ')';
  document.getElementById('scrolling-text').style.color = textColor;
});