スクロールで羽をふんわり漂わせよう

document.addEventListener('DOMContentLoaded', function () {
  // ランダムな値を生成する関数
  const getRandom = (min, max) => Math.random() * (max - min) + min;

  // "main-post-content" 要素とその境界を取得
  const mainPostContent = document.querySelector('.main-post-content');
  const feathers = document.querySelectorAll('.main-post-content .feather');
  const contentRect = mainPostContent.getBoundingClientRect();

  // 初期位置と角度を設定 (main-post-content 内に収める)
  feathers.forEach(feather => {
    feather.style.position = 'absolute'; // 必ず absolute に設定
    feather.style.zIndex = '1000'; // 羽を手前に移動
    feather.style.top = `${getRandom(0, contentRect.height)}px`; // 垂直位置
    feather.style.left = `${getRandom(0, contentRect.width)}px`; // 水平位置
    feather.style.transform = `rotate(${getRandom(-45, 45)}deg)`; // ランダムな角度
  });

  // スクロールイベントの処理
  let previousScrollY = window.scrollY; // 前回のスクロール位置を記録

  window.addEventListener('scroll', () => {
    const currentScrollY = window.scrollY; // 現在のスクロール位置
    const scrollDelta = currentScrollY - previousScrollY; // スクロール量の変化を計算
    previousScrollY = currentScrollY; // 現在のスクロール位置を更新

    feathers.forEach(feather => {
      // 現在の位置を取得
      const currentTop = parseFloat(feather.style.top);
      const currentLeft = parseFloat(feather.style.left);

      // 上下方向の移動 (一定速度)
      const verticalMovement = scrollDelta > 0 ? 1 : -1; // 上下方向のスピードを固定
      const newTop = currentTop + verticalMovement;

      // 横方向の揺れ幅を増加
      const horizontalMovement = getRandom(-3, 3); // より大きな水平方向の動き
      const newLeft = currentLeft + horizontalMovement;

      // 回転をもっと頻繁に変更 (角度の変化を増加)
      const currentRotation = parseFloat(
        feather.style.transform.replace(/[^\d.-]/g, '')
      );
      const newRotation = currentRotation + getRandom(-5, 5); // 回転量を強化

      // 移動と回転を更新 (要素外に出ても変更しない)
      feather.style.top = `${newTop}px`; // 新しい位置を設定
      feather.style.left = `${newLeft}px`;
      feather.style.transform = `rotate(${newRotation}deg)`; // 回転を設定
    });
  });
});

<div class="main-post-content">
	<img src="/wp-content/uploads/2025/01/rb_343.png" alt="羽" width="2000" height="1543" class="aligncenter size-full wp-image-504 feather" />
	<img src="/wp-content/uploads/2025/01/rb_343.png" alt="羽" width="2000" height="1543" class="aligncenter size-full wp-image-504 feather" />
	<img src="/wp-content/uploads/2025/01/rb_343.png" alt="羽" width="2000" height="1543" class="aligncenter size-full wp-image-504 feather" />
	<img src="/wp-content/uploads/2025/01/rb_343.png" alt="羽" width="2000" height="1543" class="aligncenter size-full wp-image-504 feather" />
	<img src="/wp-content/uploads/2025/01/rb_343.png" alt="羽" width="2000" height="1543" class="aligncenter size-full wp-image-504 feather" />
</div>

.feather {
	width: 10%;
	height: auto;
    position: absolute;
    transition: transform 0.3s ease, top 0.3s ease;
}