【Next.js】スクロールで要素をふわっと表示する方法を解説

"use client";

  import { useEffect, useRef, useState, type ReactNode } from "react";

  type RevealProps = {
    children: ReactNode;
    className?: string;
  };

  export function Reveal({ children, className }: RevealProps) {
    const ref = useRef<HTMLDivElement>(null);
    const [visible, setVisible] = useState(false);

    useEffect(() => {
      const element = ref.current;
      if (!element) return;

      const observer = new IntersectionObserver(
        ([entry]) => {
          if (entry.isIntersecting) {
            setVisible(true);
            observer.disconnect(); // 一度表示したら監視をやめる
          }
        },
        // 画面の下端から 10% 手前に入ったら表示する
        { rootMargin: "0px 0px -10% 0px", threshold: 0 }
      );

      observer.observe(element);
      return () => observer.disconnect();
    }, []);

    return (
      <div ref={ref} data-visible={visible} className={["reveal", className].filter(Boolean).join(" ")}>
        {children}
      </div>
    );
  }

"use client";

  import { motion, type Variants } from "motion/react";

  const container: Variants = {
    hidden: {},
    show: { transition: { staggerChildren: 0.08 } },
  };

  const item: Variants = {
    hidden: { opacity: 0, y: 20 },
    show: {
      opacity: 1,
      y: 0,
      transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] },
    },
  };

  type Feature = { title: string; body: string };

  export function RevealList({ items }: { items: Feature[] }) {
    return (
      <motion.ul
        variants={container}
        initial="hidden"
        whileInView="show"
        viewport={{ once: true, amount: 0.3 }}
        className="grid gap-6 md:grid-cols-3"
      >
        {items.map((feature) => (
          <motion.li
            key={feature.title}
            variants={item}
            className="rounded-2xl border border-zinc-200 p-6"
          >
            <h3 className="font-semibold">{feature.title}</h3>
            <p className="mt-2 text-sm text-zinc-600">{feature.body}</p>
          </motion.li>
        ))}
      </motion.ul>
    );
  }

"use client";

  import { motion, useScroll, useTransform } from "motion/react";
  import { useRef } from "react";

  export function ParallaxImage({ src, alt }: { src: string; alt: string }) {
    const ref = useRef<HTMLDivElement>(null);
    const { scrollYProgress } = useScroll({
      target: ref,
      offset: ["start end", "end start"],
    });
    const y = useTransform(scrollYProgress, [0, 1], [40, -40]);

    return (
      <div ref={ref} className="overflow-hidden rounded-2xl">
        <motion.img src={src} alt={alt} style={{ y, scale: 1.1 }} className="h-full w-full object-cover" />
      </div>
    );
  }