【Next.js】ヒーローセクションに入場と背景のアニメーションを付ける方法を解説

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-rise {
  animation: hero-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .hero-rise {
    animation: none;
  }
}

export default function Page() {
  return (
    <section className="relative isolate min-h-[100svh] overflow-hidden px-6 pt-28">
      <p className="hero-rise text-sm tracking-wide">2026 Launch</p>
      <h1 className="hero-rise mt-4 text-4xl font-semibold" style={{ animationDelay: "80ms" }}>
        動きのあるファーストビューを、今日出す
      </h1>
      <p className="hero-rise mt-5 max-w-xl text-zinc-600" style={{ animationDelay: "160ms" }}>
        見出し、本文、ボタンの順に揃えるだけで印象は変わります。
      </p>
      <div className="hero-rise mt-8" style={{ animationDelay: "240ms" }}>
        <a
          href="#features"
          className="inline-flex rounded-full bg-zinc-950 px-5 py-3 text-white transition hover:scale-[0.98]"
        >
          詳しく見る
        </a>
      </div>
    </section>
  );
}

<div
  aria-hidden
  className="hero-glow pointer-events-none absolute inset-x-0 -top-1/2 -z-10 h-[120%]"
/>

"use client";

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

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

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

export function Hero() {
  return (
    <motion.section
      variants={container}
      initial="hidden"
      animate="show"
      className="min-h-[100svh] px-6 pt-28"
    >
      <motion.p variants={item} className="text-sm tracking-wide">2026 Launch</motion.p>
      <motion.h1 variants={item} className="mt-4 text-4xl font-semibold">
        動きのあるファーストビューを、今日出す
      </motion.h1>
      <motion.p variants={item} className="mt-5 max-w-xl text-zinc-600">
        見出し、本文、ボタンの順に揃えるだけで印象は変わります。
      </motion.p>
      <motion.a
        variants={item}
        href="#features"
        whileHover={{ scale: 0.98 }}
        className="mt-8 inline-flex rounded-full bg-zinc-950 px-5 py-3 text-white"
      >
        詳しく見る
      </motion.a>
    </motion.section>
  );
}

"use client";

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

export function HeroParallax() {
  const ref = useRef<HTMLElement>(null);
  const reduce = useReducedMotion();
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start start", "end start"],
  });
  const bgY = useTransform(scrollYProgress, [0, 1], ["0%", reduce ? "0%" : "15%"]);
  const textOpacity = useTransform(scrollYProgress, [0, 0.7], [1, 0]);

  return (
    <section ref={ref} className="relative isolate min-h-[100svh] overflow-hidden px-6 pt-28">
      <motion.div
        aria-hidden
        style={{ y: bgY, backgroundImage: "url(/hero.jpg)" }}
        className="absolute inset-x-0 -top-[10%] -z-10 h-[120%] bg-cover bg-center"
      />
      <motion.div style={{ opacity: textOpacity }}>
        <h1 className="text-4xl font-semibold text-white">奥行きのあるファーストビュー</h1>
      </motion.div>
    </section>
  );
}