画像が重なりながら順に切り替わるギャラリー

デモ

仕様

用途: カード
動作: DOM
種類: レシピ
動作確認: three 0.186.0・gsap 3.15.0
公開日: 2026年9月13日

しくみと調整

画像を同じ枠に重ね、次の画像を手前に出しながら不透明度を上げていきます。前の画像は、次の画像が現れきるまで下にそのまま残します。両方を同時に薄くすると、途中で枠の地の色が透けて暗く見えてしまいます。

重なって切り替わる時間は 0.9 秒、次が現れ始めるまでの間隔は 1.6 秒です。出ている間は少しずつ寄りを引く演出もかけていて、静止画のままでも動きを感じさせます。

各画像の見え方は「その画像が現れ始めてからの経過時間」だけで決まるので、時刻を周期で折り返すと、最後の画像から最初の画像へも自然につながります。周期の境目をまたぐ瞬間は、値をごくわずかに丸めてから比べないと、覆われきったはずの画像が一瞬だけ上に残ります。

ホバーしている間は進み方を止め、止めるボタンでも同じように止められるようにしています。画像が切り替わる間隔や重なる時間を変えると、ゆったりした見せ方にも忙しい見せ方にも調整できます。

トップのメインビジュアルや、施設・物件の写真、作品のスライドショーに向いています。

コード

HTML

<section class="crossfade" aria-labelledby="crossfade-title">
  <h2 class="crossfade__title" id="crossfade-title">旅の記録</h2>

  <div class="crossfade__frame">
    <figure class="crossfade__slide">
      <img src="/images/gallery-dune.jpg" alt="朝日に照らされた砂丘">
      <figcaption>
        <p class="crossfade__place">鳥取・4月</p>
        <p class="crossfade__name">砂丘の朝</p>
      </figcaption>
    </figure>
    <figure class="crossfade__slide">
      <img src="/images/gallery-sea.jpg" alt="波の静かな昼の海">
      <figcaption>
        <p class="crossfade__place">沖縄・7月</p>
        <p class="crossfade__name">凪の海</p>
      </figcaption>
    </figure>
    <figure class="crossfade__slide">
      <img src="/images/gallery-garden.jpg" alt="夜の庭に咲く花">
      <figcaption>
        <p class="crossfade__place">京都・6月</p>
        <p class="crossfade__name">夜の庭</p>
      </figcaption>
    </figure>
    <figure class="crossfade__slide">
      <img src="/images/gallery-hill.jpg" alt="なだらかに続く緑の丘">
      <figcaption>
        <p class="crossfade__place">北海道・9月</p>
        <p class="crossfade__name">緑の丘</p>
      </figcaption>
    </figure>
  </div>

  <button class="crossfade__toggle" type="button" aria-pressed="false" hidden>一時停止</button>
</section>

CSS

.crossfade {
  --bg: #111111;
  --ink: #eeece6;
  --mute: #a8a6a0;
  --surface: #262626;
  padding: 64px clamp(16px, 6vw, 96px) 96px;
  background: var(--bg);
  color: var(--ink);
}

.crossfade__title {
  margin: 0 0 32px;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.crossfade__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  background: var(--surface);
}

.crossfade__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
}

.crossfade__slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.crossfade__slide figcaption {
  position: absolute;
  left: 32px;
  bottom: 32px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.crossfade__place {
  margin: 0;
  color: var(--mute);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.crossfade__name {
  margin: 8px 0 0;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.crossfade__toggle {
  height: 40px;
  margin-top: 24px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--ink);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.crossfade__toggle[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
}

.crossfade__toggle:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

JavaScript

import { gsap } from "gsap";

const HOLD = 1.6; // 次の画像が現れ始めるまでの間隔（秒）
const FADE = 0.9; // 重なって切り替わる時間（秒）
const SCALE_FROM = 1.14; // 現れ始めの寄り。次の画像に覆われきるまでに 1 まで引く
const reduceMotion = matchMedia("(prefers-reduced-motion: reduce)").matches;
const fade = gsap.parseEase("power1.inOut");
const clamp = gsap.utils.clamp(0, 1);

document.querySelectorAll(".crossfade").forEach((section) => {
  const frame = section.querySelector(".crossfade__frame");
  const toggle = section.querySelector(".crossfade__toggle");
  const slides = [...frame.children].map((slide, i) => ({
    slide,
    img: slide.querySelector("img"),
    caption: slide.querySelector("figcaption"),
    drift: i % 2 === 0 ? 1 : -1, // 引く向きを 1 枚ごとに左右で入れ替える
  }));
  const DURATION = HOLD * slides.length;
  const LIFE = FADE + HOLD; // 現れ始めてから、次の画像に覆われきるまで

  const draw = (t) => {
    slides.forEach(({ slide, img, caption, drift }, i) => {
      // この画像が現れ始めてからの時間。周期で折り返すので、最後の画像の次に最初の画像がつながる
      const v = Math.round((((t - (i * HOLD - FADE)) % DURATION) + DURATION) % DURATION * 1e6) / 1e6;
      const shown = v < LIFE;
      slide.style.opacity = String(v < FADE ? fade(v / FADE) : shown ? 1 : 0);
      slide.style.zIndex = v < FADE ? "2" : shown ? "1" : "0";
      const k = shown ? v / LIFE : 1;
      img.style.transform = `translateX(${(drift * (1 - k) * 2).toFixed(3)}%) scale(${(SCALE_FROM + (1 - SCALE_FROM) * k).toFixed(4)})`;
      const enter = clamp((v - FADE * 0.45) / (FADE * 0.55));
      const leave = clamp((v - HOLD) / (FADE * 0.45));
      caption.style.opacity = String(fade(Math.min(enter, 1 - leave)));
    });
  };

  if (reduceMotion) {
    draw(LIFE); // 1 枚目が出そろった状態で止める
    return;
  }

  let clock = 0;
  let hovering = false;
  let userPaused = false;
  gsap.ticker.add((time, deltaTime) => {
    if (!hovering && !userPaused) clock += deltaTime / 1000;
    draw(clock % DURATION);
  });
  frame.addEventListener("pointerenter", () => (hovering = true));
  frame.addEventListener("pointerleave", () => (hovering = false));

  // 5 秒より長く動き続けるので、止める手段を置く
  toggle.hidden = false;
  toggle.addEventListener("click", () => {
    userPaused = !userPaused;
    toggle.setAttribute("aria-pressed", String(userPaused));
  });
});