Canvas × CSSで作るモザイク解除アニメーションの実装

1
// ---- 定数 ----
2
const SELECTORS = {
3
  wrapper: ".mosaic-img",
4
  mosaicContainer: ".mosaic-img__layer",
5
  mosaicImg: ".mosaic-img img",
6
  cell: ".mosaic-img__cell",
7
};
8

9
const LEVEL_CONFIGS = [
10
  { cols: 4, rows: 3 },
11
  { cols: 8, rows: 6 },
12
  { cols: 16, rows: 12 },
13
  { cols: 32, rows: 24 },
14
];
15

16
const ANIMATION = {
17
  fadeInDuration: 0.5,
18
  fadeOutDuration: 0.25,
19
  staggerDelay: 0.2,
20
};
21

22
// ---- DOM 取得 ----
23
const mosaicContainers = [
24
  ...document.querySelectorAll(SELECTORS.mosaicContainer),
25
];
26

27
const mosaicImg = document.querySelector(SELECTORS.mosaicImg);
28

29
gsap.registerPlugin(ScrollTrigger);
30

31
// ---- モザイクセルの生成 ----
32
function buildCells(container, { cols, rows }) {
33
  const fragment = document.createDocumentFragment();
34
  const total = cols * rows;
35

36
  for (let i = 0; i < total; i++) {
37
    const cell = document.createElement("div");
38
    cell.className = SELECTORS.cell.slice(1);
39
    fragment.appendChild(cell);
40
  }
41

42
  container.appendChild(fragment);
43
}
44

45
// ---- 画像からピクセル色をサンプリングしてセルに適用 ----
46
function applyColorSampling(img) {
47
  const canvas = document.createElement("canvas");
48
  const ctx = canvas.getContext("2d");
49

50
  mosaicContainers.forEach((container, levelIndex) => {
51
    const { cols, rows } = LEVEL_CONFIGS[levelIndex];
52

53
    // canvas を各レベルの解像度にリサイズして再利用
54
    canvas.width = cols;
55
    canvas.height = rows;
56
    ctx.drawImage(img, 0, 0, cols, rows);
57

58
    // ドット単位のピクセルデータの配列を取得
59
    const imageData = ctx.getImageData(0, 0, cols, rows);
60
    const data = imageData.data;
61

62
    const cells = container.querySelectorAll(SELECTORS.cell);
63

64
    cells.forEach((cell, index) => {
65
      const pixelIndex = index * 4;
66
      const r = data[pixelIndex];
67
      const g = data[pixelIndex + 1];
68
      const b = data[pixelIndex + 2];
69
      const a = data[pixelIndex + 3] / 255;
70
      cell.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${a})`;
71
    });
72
  });
73
}
74

75
// 画像の CORS 再読み込みが終わるまで待つ（load / error のどちらかで解決）
76
function waitForMosaicImgReload(img) {
77
  return new Promise((resolve) => {
78
    img.addEventListener("load", resolve, { once: true });
79
    img.addEventListener(
80
      "error",
81
      () => {
82
        console.error("モザイク用画像の読み込みに失敗しました");
83
        resolve();
84
      },
85
      { once: true },
86
    );
87
    img.src = img.src;
88
  });
89
}
90

91
// ---- モザイクエフェクトの初期化 ----
92
async function initMosaicEffect() {
93
  if (!mosaicContainers.length || !mosaicImg) return;
94

95
  mosaicContainers.forEach((container, index) => {
96
    buildCells(container, LEVEL_CONFIGS[index]);
97
  });
98

99
  mosaicImg.crossOrigin = "anonymous";
100
  await waitForMosaicImgReload(mosaicImg);
101

102
  if (mosaicImg.naturalWidth > 0) {
103
    applyColorSampling(mosaicImg);
104
  }
105
}
106

107
// ---- GSAP アニメーション ----
108
function initAnimation() {
109
  const wrapper = document.querySelector(SELECTORS.wrapper);
110
  if (!wrapper || !mosaicContainers.length) return;
111

112
  const tl = gsap.timeline({
113
    scrollTrigger: {
114
      trigger: wrapper,
115
      start: "25% bottom",
116
      once: true,
117
    },
118
  });
119

120
  // 初期設定（ラッパーを非表示に）
121
  tl.set(wrapper, { opacity: 0 }, 0);
122

123
  tl.to(wrapper, {
124
    opacity: 1,
125
    duration: ANIMATION.fadeInDuration,
126
    ease: "power2.out",
127
  });
128

129
  mosaicContainers.forEach((layer) => {
130
    tl.to(
131
      layer,
132
      { opacity: 0, duration: ANIMATION.fadeOutDuration },
133
      `<+=${ANIMATION.staggerDelay}`,
134
    );
135
  });
136
}
137

138
// ---- エントリーポイント ----
139
async function init() {
140
  await initMosaicEffect();
141
  initAnimation();
142
}
143

144
init();