スクロールで写真が組み上がる！CSSとJavaScriptで作るジグソーパズル風アニメーション

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です!

今回は「スクロールで写真がジグソーパズルのように組み上がる」アニメーション演出をご紹介します。
最近では、Webサイトで“動きのある写真演出”が注目されており、静的な画像では伝わらない「体験型のビジュアル表現」が増えています。
そんな中でも人気なのが、スクロールに合わせてピースが1枚ずつ組み上がる「ジグソーパズル風エフェクト」。
静止画が少しずつ完成していく様子は、まるで物語の導入部分のように、見る人を惹きつけますよ。

今回は、CSS GridとJavaScriptのIntersection Observerを組み合わせて、実際にこの演出を実装してみましょう。
HTML・CSS・JavaScriptの3ステップで、誰でも簡単に再現できます。

デモコード

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

HTML構造

<div class="puzzle-container">
  <div class="piece" style="background-image: url('https://picsum.photos/400/400?random=1')"></div>
  <div class="piece" style="background-image: url('https://picsum.photos/400/400?random=1')"></div>
  <div class="piece" style="background-image: url('https://picsum.photos/400/400?random=1')"></div>
  <div class="piece" style="background-image: url('https://picsum.photos/400/400?random=1')"></div>
</div>

写真を4分割して配置しています（もちろん、9分割や16分割にも応用可能です）。
CSSで各ピースをズラしておき、スクロール時に1枚ずつ正しい位置に戻す仕組みを作ります。

CSSでパズルピースの初期状態を作る

  .puzzle-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    width: 400px;
    height: 400px;
    margin: 100px auto;
    position: relative;
    overflow: hidden;
  }
  .piece {
    background-size: 400px 400px;
    transform: translate(var(--x, 0), var(--y, 0)) scale(0);
    opacity: 0;
    transition: transform 1s ease, opacity 1s ease;
  }
  .piece.show {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }

最初はピースがズレた位置（または小さくなった状態）にあり、
スクロールで.showクラスが付与された瞬間に、正しい位置に移動して透明度が1になる、という流れです。

JavaScriptでスクロール連動アニメーションを制御

  const pieces = document.querySelectorAll(".piece");
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add("show");
        } else {
          entry.target.classList.remove("show");
        }
      });
    },
    { threshold: 0.2 }
  );
  pieces.forEach((piece, index) => {
    piece.style.setProperty("--x", `${(Math.random() - 0.5) * 300}px`);
    piece.style.setProperty("--y", `${(Math.random() - 0.5) * 300}px`);
    observer.observe(piece);
  });

このスクリプトでは、各ピースが画面内に入ったタイミングで.showクラスを付与。
ピースがバラバラな位置からフワッと集まるように組み上がるアニメーションが実現します。

また、スクロールを戻すと再び崩れるようにしているため、何度でもアニメーションを楽しめます。

応用：ピース数を増やして滑らかに組み上げる

9ピースや16ピースなど、グリッド数を増やすとさらにリアルな「ジグソーパズル風」になります。
また、transition-delayをランダムに加えることで、バラバラに組み上がる自然な演出も可能です。

 .piece { transition-delay: calc(var(--delay) * 0.1s); } 

JavaScriptで以下を追加すると、各ピースが少しずつ時間差で現れます。

 piece.style.setProperty('--delay', Math.random()); 

まとめ

スクロール連動で写真が組み上がる「ジグソーパズル風エフェクト」は、静止画を“動くストーリー”に変える力を持っています。

CSSとJavaScriptを少し組み合わせるだけで、ブランドや作品紹介ページにインパクトを与えられる演出になります。
ぜひ、試してみてください。

satokotadesignキャンペーン実施中！