【Next.js】ビフォーアフタースライダーの作り方をドラッグとスクロール演出まで解説

"use client";

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

type Img = { src: string; alt: string };

export function BeforeAfterSlider({ before, after }: { before: Img; after: Img }) {
  const [pos, setPos] = useState(50); // Before を見せる幅（%）
  const inputId = useId();

  return (
    <div className="relative aspect-[3/2] w-full select-none overflow-hidden rounded-2xl bg-zinc-100">
      {/* 下の層：After */}
      <Image src={after.src} alt={after.alt} fill sizes="(min-width: 768px) 720px, 100vw" className="object-cover" />

      {/* 上の層：Before。右側を切り取って左だけ見せる */}
      <div className="absolute inset-0" style={{ clipPath: "inset(0 " + (100 - pos) + "% 0 0)" }}>
        <Image src={before.src} alt={before.alt} fill sizes="(min-width: 768px) 720px, 100vw" className="object-cover" />
      </div>

      {/* 境目の線 */}
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-y-0 w-0.5 -translate-x-1/2 bg-white"
        style={{ left: pos + "%" }}
      />

      <label htmlFor={inputId} className="sr-only">
        Before と After の境目の位置
      </label>
      <input
        id={inputId}
        type="range"
        min={0}
        max={100}
        value={pos}
        onChange={(e) => setPos(Number(e.target.value))}
        aria-valuetext={"Before を " + pos + "% 表示"}
        className="absolute inset-0 h-full w-full cursor-ew-resize opacity-0"
      />
    </div>
  );
}

"use client";

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

type Img = { src: string; alt: string };

type Props = {
  before: Img;
  after: Img;
  aspect?: string; // 例: "3 / 2"
  initial?: number;
};

const SIZES = "(min-width: 768px) 720px, 100vw";

export function BeforeAfterSlider({ before, after, aspect = "3 / 2", initial = 50 }: Props) {
  const [pos, setPos] = useState(initial);
  const boxRef = useRef<HTMLDivElement>(null);
  const dragging = useRef(false);
  const inputId = useId();

  function moveTo(clientX: number) {
    const box = boxRef.current;
    if (!box) return;
    const rect = box.getBoundingClientRect();
    const next = ((clientX - rect.left) / rect.width) * 100;
    setPos(Math.round(Math.min(100, Math.max(0, next))));
  }

  function stop() {
    dragging.current = false;
  }

  return (
    <div
      ref={boxRef}
      onPointerDown={(e) => {
        dragging.current = true;
        e.currentTarget.setPointerCapture(e.pointerId);
        moveTo(e.clientX);
      }}
      onPointerMove={(e) => {
        if (dragging.current) moveTo(e.clientX);
      }}
      onPointerUp={stop}
      onPointerCancel={stop}
      className="group relative w-full cursor-ew-resize touch-pan-y select-none overflow-hidden rounded-2xl bg-zinc-100"
      style={{ aspectRatio: aspect }}
    >
      <Image src={after.src} alt={after.alt} fill sizes={SIZES} draggable={false} className="object-cover" />
      <div className="absolute inset-0" style={{ clipPath: "inset(0 " + (100 - pos) + "% 0 0)" }}>
        <Image src={before.src} alt={before.alt} fill sizes={SIZES} draggable={false} className="object-cover" />
      </div>

      <span className="pointer-events-none absolute left-3 top-3 rounded-full bg-black/60 px-3 py-1 text-xs text-white">Before</span>
      <span className="pointer-events-none absolute right-3 top-3 rounded-full bg-black/60 px-3 py-1 text-xs text-white">After</span>

      {/* キーボードとスクリーンリーダー用。マウスと指の操作は外側の div が受け取る */}
      <label htmlFor={inputId} className="sr-only">
        Before と After の境目の位置
      </label>
      <input
        id={inputId}
        type="range"
        min={0}
        max={100}
        value={pos}
        onChange={(e) => setPos(Number(e.target.value))}
        aria-valuetext={"Before を " + pos + "% 表示"}
        className="pointer-events-none absolute inset-0 h-full w-full opacity-0"
      />

      {/* 境目の線とつまみ（見た目だけ） */}
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-y-0 w-0.5 -translate-x-1/2 bg-white"
        style={{ left: pos + "%" }}
      >
        <span className="absolute left-1/2 top-1/2 flex size-11 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-white text-zinc-900 shadow-lg ring-sky-500 ring-offset-2 group-has-[:focus-visible]:ring-2">
          ↔
        </span>
      </div>
    </div>
  );
}

import { BeforeAfterSlider } from "@/components/BeforeAfterSlider";

export default function Page() {
  return (
    <section className="mx-auto max-w-3xl px-6 py-24">
      <h2 className="text-3xl font-semibold">片付けサービスの施工例</h2>
      <p className="mt-3 text-zinc-600">境目をドラッグして、作業の前とあとを見比べられます。</p>
      <div className="mt-10">
        <BeforeAfterSlider
          before={{ src: "/ba/room-before.jpg", alt: "作業前のリビング。床に段ボールが積まれている" }}
          after={{ src: "/ba/room-after.jpg", alt: "作業後のリビング。床が見え、荷物は棚に収まっている" }}
          aspect="3 / 2"
        />
      </div>
    </section>
  );
}

"use client";

import Image from "next/image";
import { useRef } from "react";
import { motion, useReducedMotion, useScroll, useTransform } from "motion/react";
import { BeforeAfterSlider } from "./BeforeAfterSlider";

type Img = { src: string; alt: string };
type Props = { before: Img; after: Img };

const SIZES = "(min-width: 1024px) 896px, 100vw";

export function BeforeAfterScroll(props: Props) {
  const reduce = useReducedMotion();
  // 動きを減らす設定なら、手で動かすスライダーを出す
  if (reduce) return <BeforeAfterSlider {...props} />;
  return <ScrollWipe {...props} />;
}

function ScrollWipe({ before, after }: Props) {
  const trackRef = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({ target: trackRef, offset: ["start start", "end end"] });
  // 進み具合 15%〜85% の間で、Before の右側を 0% から 100% まで切り取る
  const hidden = useTransform(scrollYProgress, [0.15, 0.85], [0, 100]);
  const clipPath = useTransform(hidden, (v) => "inset(0 " + v + "% 0 0)");
  const lineLeft = useTransform(hidden, (v) => 100 - v + "%");

  return (
    <div ref={trackRef} className="relative h-[250vh]">
      <div className="sticky top-0 flex h-svh items-center justify-center px-6">
        <div className="relative aspect-[3/2] w-full max-w-4xl overflow-hidden rounded-2xl bg-zinc-100">
          <Image src={after.src} alt={after.alt} fill sizes={SIZES} className="object-cover" />
          <motion.div className="absolute inset-0" style={{ clipPath }}>
            <Image src={before.src} alt={before.alt} fill sizes={SIZES} className="object-cover" />
          </motion.div>
          <motion.div
            aria-hidden="true"
            className="absolute inset-y-0 w-0.5 -translate-x-1/2 bg-white"
            style={{ left: lineLeft }}
          />
        </div>
      </div>
    </div>
  );
}