スクロール連動で回転する円形画像アニメーション【Scroll-Linked Circular Rotation 実装解説】

<div class="about_container">
  <div class="rotating-images">
    <!-- 画像タグはここに追加 -->
    <img src="画像URL1" class="rot-img" />
    <img src="画像URL2" class="rot-img" />
    <img src="画像URL3" class="rot-img" />
    <!-- 画像の数は自由に増減可能 -->
  </div>
</div>

body {
  height: 300vh; /* ページ全体の高さを確保してスクロールを有効に */
  margin: 0; /* 余白をなくして画面いっぱいに表示 */
}

.about_container {
  position: relative; /* 内部の絶対配置要素の基準 */
}

.rotating-images {
  position: fixed; /* 画面中央に固定表示 */
  top: 50%; /* 垂直方向の中央 */
  left: 50%; /* 水平方向の中央 */
  width: 500px; /* コンテナの幅 */
  height: 500px; /* コンテナの高さ */
  pointer-events: none; /* マウスイベントを無効化 */
  z-index: 10; /* 他の要素より前面に表示 */
  transform: translate(-50%, -50%); /* 要素の中心を基準に位置調整 */
}

.rot-img {
  position: absolute; /* 親要素内で自由に配置 */
  top: 50%; /* 各画像の基準を中央に */
  left: 50%; /* 各画像の基準を中央に */
  width: 150px; /* 画像の横幅 */
  height: 150px; /* 画像の高さ */
  object-fit: cover; /* 画像の切り抜き方法 */
  transform-origin: center center; /* 回転の中心を画像の中心に設定 */
  border-radius: 9999px; /* 画像を円形にする */
}

const images = document.querySelectorAll('.rot-img');
const radius = 200; // 画像を配置する円の半径（ピクセル）

// 画像の初期角度を計算（画像数に応じて均等配置）
const initialAngles = Array.from(images, (_, i) => i * (2 * Math.PI / images.length));

// ページ読み込み時に画像を円形に初期配置
initialAngles.forEach((angle, i) => {
  const x = Math.cos(angle) * radius; // X座標計算
  const y = Math.sin(angle) * radius; // Y座標計算
  images[i].style.transform = `translate(-50%, -50%) translate(${x}px, ${y}px)`;
});

// スクロールに連動して回転させる処理
window.addEventListener('scroll', () => {
  const scrollTop = window.scrollY || window.pageYOffset; // 現在のスクロール位置
  const docHeight = document.body.scrollHeight - window.innerHeight; // スクロール可能な最大値

  // スクロールの進捗を0〜1で算出
  let progress = scrollTop / docHeight;
  progress = Math.max(0, Math.min(1, progress)); // 0未満、1超えを防止

  // 進捗に応じて回転角を計算（1周＝2πラジアン）
  const rotation = progress * 2 * Math.PI;

  // 各画像の角度に回転を加算し、位置を更新
  images.forEach((img, i) => {
    const angle = initialAngles[i] + rotation;
    const x = Math.cos(angle) * radius;
    const y = Math.sin(angle) * radius;
    img.style.transform = `translate(-50%, -50%) translate(${x}px, ${y}px)`;
  });
});

const rotation = progress * 2 * Math.PI;

const radius = 200;