如何在页面滚动 gsap 时更改 CSS 变量的值？

Question

我有一个名为 --color 的 css 变量。我想在页面向下滚动时更改此 css 变量的值。页面的滚动应该“擦洗”该值。

示例：--颜色从 rgb(255, 255, 255) 开始。随着页面向下滚动，该值越来越接近并最终在一直向下滚动时达到 rgb(0, 0, 0) 。向上滚动时，该值应缓慢返回到 rgb(255, 255, 255)，在页面完全向上滚动时达到。

我一直在尝试使用 GSAP 实现这一目标，但尚未取得任何成功，尽管我相信它一定可以通过库实现。

Answer 1

很遗憾，我对 GSAP 不熟悉，但是这里是 the link 描述了如何使用 JS 获取计算样式和该样式的属性值。您需要监听滚动事件并更改监听器内部的 css 变量的值，如下所示：

document.addEventListener('scroll', function(e) {
  var root = document.querySelector(':root');
  var newColor = // do your color calculations here;
  root.style.setProperty('--color', newColor);
  }

这里有一些有用的链接。

https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

Answer 2

提供代码片段以显示已经尝试过的内容会很有帮助。帮助确定答案的具体性。

要对您的问题给出一般答案，您可以使用 ScrollTrigger 来定义颜色变化的点。定义应该开始更改的标记，并在回调中使用 coloronEnter、onLeave、onEnterBack 等属性来更改颜色。

Answer 3

这是您的 rgb() 颜色的 平均值 计算结果，可能足以从浅色到深色再变暗。还远远不够完美。

const body = document.querySelector("body ");
const bodyHeight = document.querySelector("body").offsetHeight;
body.innerHTML = '<p style="position:sticky;top:0;">Body Height: ' + bodyHeight +  'px <br>Window Height: ' + window.innerHeight + 'px</p>';
const root = document.querySelector(":root");
window.addEventListener("scroll", (event) => {
  let scroll = this.scrollY;
  let ratio = (scroll / (bodyHeight - window.innerHeight )  )  ;
  let rgbvalue = 255 -  ratio * 255;
  root.style.setProperty(  "--color", "rgba(" + rgbvalue + "," + rgbvalue + "," + rgbvalue + ")"
  );

  console.log(rgbvalue);
});

body {
  background: var(--color, rgb(255, 255, 255));/* use defaul trgb(255, 255, 255) untill var is set from js */
  height: 300vh;
}

<div></div>

Answer 4

好的，给你：

gsap.to("body", {
  "--color": "black",
  scrollTrigger: {
    start: 0,
    end: "max",
    scrub: true
  }
});

https://codepen.io/GreenSock/pen/WNOzWaM?editors=0110

顺便说一下，https://greensock.com/forums

上有专门的 GSAP 论坛

如何在页面滚动 gsap 时更改 CSS 变量的值？

How to change value of CSS variable as page scrolls gsap?

html

javascript

css

gsap