Javascript 更改滚动上的背景线性放坡度

在我的Web应用程序中，我有一个由2个线性渐变组成的背景 我想根据卷轴改变渐变的倾斜度

我真的不知道该怎么做

这是当前状态： 所以我想在卷轴上设置蓝色背景的动画：-

这是我网站背景的css

html{ 字体系列：“Roboto Mono”，monospace； 背景：线性梯度70度，5870cb 20%，rgba0，0，0，0 1%， 线性梯度20度，白色85%，5870cb 2%； 背景位置：中心； 背景重复：无重复； 背景尺寸：封面； 背景附件：固定； 高度：100vh；

---

} 要旋转渐变，您需要理解并解构线性渐变，它实际上是背景图像。在上可以找到一个很好的概要，官方规范在W3C上

首先要知道的是，你不能移动它的中心。因为它是元素的背景，所以渐变的中心始终是元素的中心。 注意：如果您的设计需要不同的旋转中心，则始终可以使用多个图元并相应调整其大小

现在，假设要将第一个渐变从70度旋转到110度，将第二个渐变从20度旋转到155度

快速搜索scroll事件有望让您了解，这有一个例子

结合上面的内容，你会得到一些东西，我把旋转背景图像的逻辑放在例子的doSomething函数中

我还详细说明了我从何处获得的每一点，以演示如何一步一步地记录您的问题。这里的要点是：每一点你都可以自己做，去做，只留下你不知道的部分

让最后一个已知滚动位置=0； 让滴答声=假； //助手 const body=document.querySelector'body'； consthtml=document.querySelector'html'； 函数doSomethingscroll\u pos{ //从https://stackoverflow.com/a/1147768/1891677 : const bodyHeight=Math.max body.scrollHeight， 身体，在视线之外， html.clientHeight， html.scrollHeight， html.offsetHeight； //从https://stackoverflow.com/a/8876069/1891677 : const viewportHeight=Math.maxdocument.documentElement.clientHeight， window.innerHeight | | 0； //设置滚动百分比，如果我们有可用的滚动0，否则： const availableScroll=车身高度-视口高度； 常数百分比=可用滚动>0？滚动位置*100/可用滚动：0； //这就是问题所在： const fromPercent=从，到，当前=>to-from*current/100+from； body.style.backgroundImage=` 线性梯度${fromPercent70,110，percentage}deg，5870cb 20%，rgba0,0,0， 线性梯度${fromPercent20，155，percentage}度，白色85%，5870cb 2% `; } //示例的其余部分来自MDN： window.addEventListener'scroll'，函数E{ 上次已知的滚动位置=window.scrollY； 如果！滴答{ window.requestAnimationFramefunction{ doSomethinglast\u已知\u滚动\u位置； 滴答声=假； }; 滴答声=真； } }; 身体{ 字体系列：“Roboto Mono”，monospace； 背景图像：线性梯度70度，5870cb 20%，rgba0,0,0,0,1%， 线性梯度20度，白色85%，5870cb 2%； 背景位置：中心； 背景重复：无重复； 背景尺寸：封面； 背景附件：固定； 高度：300vh；

---

} 基本上，您需要的是通过.scrollTop的当前滚动位置以及最大滚动距离.scrollHeight-window.innerHeight。如果您有这些信息，您可以使用一些JS轻松计算渐变的旋转/角度：

//元素 const HTML=document.documentElement； //getCurrentScroll:：->Number const getCurrentScroll==>HTML.scrollTop； //getMaxScroll:：->Number const getMaxScroll==>HTML.scrollHeight-window.innerHeight； //Calcrotion:：编号，编号->编号 const calcRotation=pos，max=>pos/max*360； //getBG:：Number->String const getBG=r=>`线性梯度${r+70}度，5870cb 20%，rgba0,0,0,01%，线性梯度${r+20}度，白色85%，5870cb 2%`； document.addEventListener'scroll'，=>{ const rot=calcRotationgetCurrentScroll，getMaxScroll； HTML.style.backgroundImage=getBGrot； }; html{ 字体系列：“Roboto Mono”，monospace； 背景：线性梯度70度，5870cb 20%，rgba0，0，0，0 1%， 线性梯度20度，白色85%，5870cb 2%； 背景位置：中心； 背景重复：无重复； 背景尺寸：封面； 背景附件：固定； 高度：100vh； 溢出：自动；/*没有这一行就不能滚动*/ }

---

body{height:200vh；}/*只需创建一个滚动条即可*/请分享您编写此代码的最佳尝试。没有它，或者

---

至少如果没有大量的文档工作，您就不是程序员，而是客户机。这使得你的问题在这个网站上偏离了主题。请阅读。特别是，您希望使用JavaScript根据scrollTop的值，在绑定在窗口滚动条上的函数中，逐渐更改元素的背景值。我实际上不知道如何开始。我对scrollmagic和laxxx等滚动库进行了一些研究，但它们似乎都无法修改背景属性。。如果有人能给我资源，让我自己解决问题，那将是一个很大的帮助。我不希望你给我发送代码，我可以复制…我正在试图修改这些值的滚动。。。。背景：线性梯度70度，5870cb 20%，rgba0，0，0，01%，线性梯度20度，白色85%，5870cb 2%``您希望它以哪种方式设置动画？修改这些值的方法各不相同，有些方法可能非常困难。谢谢！它工作得很好，我不得不改变一件事。我的背景设置在html标记上，而不是body标记上。所以我有这样一个：``const fromPercent=from，to，current=>to-from*current/100+from；html.style.backgroundImage=`linear gradient${fromPercent70,110，percentage}deg，5870cb 20%，rgba0,0,0,0，linear gradient${fromPercent20,155，percentage}deg，white 85%，5870cb 2%`；`谢谢这就是结果：我会接受你关于SO的建议，以备将来的问题，也谢谢你