基于页面滚动动态更改文本颜色（作为线性渐变）答案

【问题标题】：dynamically change text color (as a linear gradient) based on page scroll基于页面滚动动态更改文本颜色（作为线性渐变）
【发布时间】：2020-02-24 02:56:19
【问题描述】：

我想根据页面滚动位置从顶部动态更改文本颜色（作为线性渐变）。

window.onscroll=function(){getPosition()}

function getPosition()
{
  var scrollPos = $(window).scrollTop();
  loggy(""+scrollPos,3);
}

上面的代码给了我页面顶部的位置。我想做的是有一个函数给我一个颜色，这种颜色是基于一个线性渐变，它取决于 scrollPos 值。

线性渐变应该从 rgb(201,69,109) 开始到 rgb(18,23,28) ，并且它必须“跨越”它从 scrollPos=0 到 scrollPos=1400

有没有办法做到这一点？

function(scrollPos){
  var  color = f_color(scrollPos);
  return color;
}

编辑：这里How to get color value from gradient by percentage with javascript? 我发现这个例子将颜色从红色变为绿色。但我还没有成功地将自定义颜色设置为我的

$('#elm').css({color: 'rgb(' + ((100 - percent) *2.56) +',' + (percent *2.56) +',0)'})

(100*scrollPos)/1400 以此为百分比

【问题讨论】：

你试过什么？尝试从静态生成任何线性渐变的代码开始，然后查看可以提取哪些部分并用动态获取其值的变量替换。
您可能想要创建 3 个变量，这些变量会根据滚动位置发生变化，并在您的 rgb() 颜色中使用它们。
其实，刚刚google了一下，哇啦stackoverflow.com/questions/52637835/…
@Adam Buchanan Smith，这是纯色，而不是从颜色 A 到颜色 B 的渐变
@NPLS 它的工作原理是一样的，把代码弄乱一点。你会从那里得到它。

标签： javascript html css

【解决方案1】：

首先，您需要找到要在其间滚动的 RGB 值。我假设你想在纯黑色和纯白色之间切换，灰色介于两者之间（所有三个 RGB 值中为 0 到 255）

const text = document.querySelector('#id');
window.onscroll(function() {
    // gets your entire window height to scale to 255
    let colorVal = window.scrollHeight / (window.height / 255);

    text.style.color = "rgb(" + colorVal + "," + colorVal + "," + colorVal + ")";
}

当然，如果你想要更微妙或更漂亮的东西，你可以在像这样的函数中使用这些值。

【讨论】：