【Next.js】スクロールギャラリーの作り方を解説｜写真の固定とスマホ対応

import Image from "next/image";

  const works = [
    { title: "House in Seto", year: "2024", src: "/works/1.jpg", text: "瀬戸の丘に建つ平屋の住宅。" },
    { title: "Atelier Light", year: "2025", src: "/works/2.jpg", text: "北向きの光を取り込むアトリエ。" },
    { title: "Small Library", year: "2025", src: "/works/3.jpg", text: "駅前の小さな図書室の改装。" },
  ];

  export function StickyWorks() {
    return (
      <section className="mx-auto grid max-w-6xl gap-10 px-6 py-24 lg:grid-cols-2">
        <div className="relative aspect-[4/5] lg:sticky lg:top-24 lg:self-start">
          <Image
            src={works[0].src}
            alt={works[0].title}
            fill
            sizes="(min-width: 1024px) 50vw, 100vw"
            className="object-cover"
          />
        </div>
        <div className="space-y-40 lg:py-24">
          {works.map((work) => (
            <article key={work.title}>
              <p className="text-sm text-zinc-500">{work.year}</p>
              <h3 className="mt-2 text-3xl font-semibold">{work.title}</h3>
              <p className="mt-4 text-zinc-600">{work.text}</p>
            </article>
          ))}
        </div>
      </section>
    );
  }

"use client";

  import Image from "next/image";
  import { useEffect, useRef, useState } from "react";

  type Work = { title: string; year: string; src: string };

  export function ScrollWorks({ works }: { works: Work[] }) {
    const [index, setIndex] = useState(0);
    const marks = useRef<(HTMLDivElement | null)[]>([]);

    useEffect(() => {
      const io = new IntersectionObserver(
        (entries) => {
          entries.forEach((entry) => {
            if (!entry.isIntersecting) return;
            const i = Number(entry.target.getAttribute("data-i"));
            if (!Number.isNaN(i)) setIndex(i);
          });
        },
        // 画面の中央の線を通った目印だけを拾う
        { rootMargin: "-50% 0px -50% 0px" },
      );
      marks.current.forEach((el) => el && io.observe(el));
      return () => io.disconnect();
    }, []);

    return (
      <section className="relative">
        <div className="sticky top-0 h-[100svh] overflow-hidden bg-zinc-950" aria-hidden="true">
          {works.map((work, i) => (
            <Image
              key={work.src}
              src={work.src}
              alt=""
              fill
              sizes="100vw"
              priority={i === 0}
              className={
                "object-cover transition-opacity duration-700 " +
                (i === index ? "opacity-100" : "opacity-0")
              }
            />
          ))}
          {works.map((work, i) => (
            <div
              key={work.title}
              className={
                "absolute bottom-12 left-8 text-white transition duration-500 delay-150 " +
                (i === index ? "translate-y-0 opacity-100" : "translate-y-3 opacity-0")
              }
            >
              <p className="text-sm text-white/70">{work.year}</p>
              <p className="mt-1 text-3xl font-semibold">{work.title}</p>
            </div>
          ))}
          <p className="absolute bottom-12 right-8 text-sm tabular-nums text-white/70">
            {index + 1} / {works.length}
          </p>
        </div>
        {works.map((work, i) => (
          <div
            key={work.title}
            data-i={i}
            ref={(el) => {
              marks.current[i] = el;
            }}
            className="h-[80svh]"
          >
            <h3 className="sr-only">{work.title}（{work.year}）</h3>
          </div>
        ))}
      </section>
    );
  }

"use client";

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

  export function HorizontalWorks({ srcs }: { srcs: string[] }) {
    const ref = useRef<HTMLElement>(null);
    const { scrollYProgress } = useScroll({
      target: ref,
      offset: ["start start", "end end"],
    });
    // 最後の1枚が画面に収まる位置まで、横に動かす
    const end = "-" + ((srcs.length - 1) / srcs.length) * 100 + "%";
    const x = useTransform(scrollYProgress, [0, 1], ["0%", end]);

    return (
      <section ref={ref} className="relative" style={{ height: srcs.length * 100 + "svh" }}>
        <div className="sticky top-0 h-[100svh] overflow-hidden">
          <motion.div
            className="flex h-full"
            style={{ x, width: srcs.length * 100 + "%" }}
          >
            {srcs.map((src) => (
              <div key={src} className="h-full flex-1 p-8">
                <img src={src} alt="" className="h-full w-full rounded-2xl object-cover" />
              </div>
            ))}
          </motion.div>
        </div>
      </section>
    );
  }