[Tailwind CSS] 实现类似苹果官网的文本渐入效果

Hello 这里是 Cygra。关注我，一起学习更多 Tailwind 炫酷效果。

先放效果

文本从下方滑入视窗时，通过渐入的方式进入，是苹果官网上经常使用的效果之一。这种效果很适合在首页、落地页的标题上使用。

例如下面这个落地页的标题：

实现方式

文本的渐入效果，可以使用 IntersectionObserver 监听对应元素的位置，在文本进入视窗展示区域之后，通过改变 opacity 和 translate 来实现。

export const Comp = () => {
  const ref = useRef();
  const [inView, setInView] = useState(false);

  useEffect(() => {
    if (inView) return;
    const observer = new IntersectionObserver((e) => {
      if (e?.[0].isIntersecting && !inView) {
        setInView(true);
      }
    }, {});

    if (ref.current) {
      observer.observe(ref.current);
    }
    return () => {
      observer.unobserve(ref.current);
    };
  }, [ref, inView]);

  return (
    <h1
      className={cn(
        "transition-all duration-1000",
        inView ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
      )}
      ref={ref}
    >
      先刷重点。
    </h1>
  );
};