如何使用Framer Motion在Next.js中动态更改CSS Filter属性

uemypmqf  于 2023-11-18  发布在  其他
关注(0)|答案(1)|浏览(83)
const heroImage = () => {
  let windowHeight = window.innerHeight;
  const { scrollY } = useScroll();
  const indicator = useTransform(
    scrollY,
    [0, windowHeight],
    ['100%','20%']
  )

  return (
    <motion.div className='fixed w-full bottom-0 z-0'>
      <Image
        className='hero-image'
        src={HeroImage}
        alt='Picture of me'
        style={{
          width: "100%",
          height: "auto",
          filter: `saturate(${indicator}) brightness(20%)`
        }}

      />
    </motion.div>
  );
};

字符串
我的目标是使用帧运动,使图像组件饱和度下降,因为我向下滚动,但我就是找不到任何方法来工作,特别是因为我不能应用运动到图像组件和方法,我在上面的代码中使用的似乎不工作(过滤器样式不出现,当我检查浏览器)。
我一直在寻找一种方法,但似乎找不到任何,我会感谢任何帮助和建议,谢谢

vhipe2zx

vhipe2zx1#

我找到了另一种方法,而且很简单。
步骤1:复制图像并将其堆叠在彼此之上。
步骤2:使图像的饱和度和亮度低于正常图像。
第三步:使顶部图像的不透明度随着向下滚动而降低。
这将造成图像在向下滚动时失去饱和度的错觉。

相关问题