Tengo una variable css llamada --color. Quiero cambiar el valor de esta variable css a medida que la página se desplaza hacia abajo. El desplazamiento de la página debería "fregar" el valor.
Ejemplo: --color comienza en rgb(255, 255, 255). A medida que la página se desplaza hacia abajo, el valor se acerca y finalmente alcanza rgb (0, 0, 0) al desplazarse hacia abajo por completo. Al desplazarse hacia arriba, el valor debe avanzar lentamente hasta rgb (255, 255, 255), alcanzándolo cuando la página se desplace completamente hacia arriba.
He estado tratando de lograr esto con GSAP pero aún no he tenido éxito, aunque creo que debe ser posible con la biblioteca.
Claro aquí tienes:
gsap.to("body", { "--color": "black", scrollTrigger: { start: 0, end: "max", scrub: true } });https://codepen.io/GreenSock/pen/WNOzWaM?editors=0110
Por cierto, hay foros dedicados a GSAP en https://greensock.com/forums
lamentablemente no estoy familiarizado con GSAP, pero aquí está el enlace que describe cómo obtener los estilos calculados y el valor de propiedad de ese estilo con JS. Debe escuchar el evento de desplazamiento y cambiar el valor de la variable css dentro del oyente, así:
document.addEventListener('scroll', function(e) { var root = document.querySelector(':root'); var newColor = // do your color calculations here; root.style.setProperty('--color', newColor); }aquí hay algunos enlaces útiles.
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
Es útil cuando proporciona un fragmento de código para mostrar lo que ya se ha intentado. Ayuda con la especificidad de la respuesta.
Para dar una respuesta general a su pregunta, puede usar ScrollTrigger para definir el punto en el que cambia el color. Defina los marcadores donde debería comenzar a cambiar y use propiedades como coloronEnter , onLeave , onEnterBack en su devolución de llamada para cambiar el color.