使用useScroll和useTransform实现滚动效果上的文本填充

Question

我正在尝试创建一种反应效果，当页面滚动时，我的文本会逐渐从上到下填充如下颜色：

我认为 useTransform 变量不适用于样式文本内部。

为了做到这一点，我使用了 2 个相同的文本 - 一个只有轮廓的白色，另一个填充了通过剪辑路径样式显示的颜色。为了跟踪滚动，我使用 framer-motion 和 useScroll 以及 useTranslate。当分配给 style right 时效果很好，但当值需要是像 ClipPath 这样的较长文本时则效果不佳。

    const {scrollY} = useScroll();
    const y = useTransform(scrollY, [0,500], [0,100] );

    const style = {
       clipPath: `polygon(0px 0px, 100% 0px, 100% ${y}%, 0px ${y}%)`,
       right: x,
    };

无论滚动如何，结果都是完全填充的文本。 这是div：

<div style={{right: x}} className="textbox2">
   <motion.h2 style={{marginRight: x}} id="name">MAKS</motion.h2>
   <motion.h2 style={style} id="overname">MAKS</motion.h2>
</div>

我对反应还很陌生，所以感谢您的帮助！

Answer 1

y

是一个对象。 尝试

console.log("y", y)

，你就会看到。

您要在这里访问的值是

y.current

:

const style = {
       clipPath: `polygon(0px 0px, 100% 0px, 100% ${y.current}%, 0px ${y.current}%)`,
       right: x,
    };

请告诉我这是否有用

Answer 2

“x”有什么值？