サイトに降らせる桜の花びら（雰囲気演出用）

<div id="sakura-layer-simple"></div>

<style>
  #sakura-layer-simple {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: 2147483647 !important;
  }

  #sakura-layer-simple .sakura-petal {
    position: absolute !important;
    top: -60px !important;
    left: 0 !important;
    display: block !important;
    visibility: visible !important;
    pointer-events: none !important;
    border-radius: 70% 0 70% 0 !important;
    transform-origin: 50% 50% !important;
    will-change: transform, opacity !important;
  }
</style>

<script>
(function () {
  /*
   * ==================================================
   * 桜エフェクト設定エリア
   * 基本的にここだけ変更すれば調整できます
   * mobile：スマホ用 / pc：PC用
   * ==================================================
   */
  var SAKURA_CONFIG = {
    mobileWidth: 1024, // この幅以下をスマホ（タブレットふくめ）扱いにする。1024という数値は、シェア数多めのiPadの大型モデルの縦持ち横幅がcssデザイン上で1024px（理論値）らしいので、1024を超えたらPCとみなす暫定しきい値です

    maxItems: {
      mobile: 4,  // スマホ：同時に表示する最大枚数
      pc: 15      // PC：同時に表示する最大枚数
    },

　　interval: {
      mobile: 900, // スマホ：花びらを出す間隔。小さいほど多く出る
      pc: 420      // PC：花びらを出す間隔。小さいほど多く出る
    },

    size: {
      mobileMin: 14, // スマホ：花びら最小サイズ
      mobileMax: 20, // スマホ：花びら最大サイズ
      pcMin: 16,     // PC：花びら最小サイズ
      pcMax: 26      // PC：花びら最大サイズ
    },

    speed: {
      mobileMin: 6500, // スマホ：最短落下時間。小さいほど速い
      mobileMax: 9500, // スマホ：最長落下時間。大きいほど遅い
      pcMin: 7800,     // PC：最短落下時間
      pcMax: 12000     // PC：最長落下時間
    },

    movement: {
      mobileDrift: 45, // スマホ：横に流れる幅
      pcDrift: 30,    // PC：横に流れる幅
      mobileWave: 12,  // スマホ：ふわふわ揺れる幅
      pcWave: 50      // PC：ふわふわ揺れる幅
    },

    opacity: {
      mobileMin: 0.42, // スマホ：透明度の最小値
      mobileMax: 0.62, // スマホ：透明度の最大値
      pcMin: 0.30,     // PC：透明度の最小値
      pcMax: 0.55      // PC：透明度の最大値
    },

    rotation: {
      baseMin: -20,      // 最初の傾き
      baseMax: 20,
      flutterSpeedMin: 4, // 回転の細かさ
      flutterSpeedMax: 7,
      angleMin: 25,       // 回転の揺れ幅
      angleMax: 45
    },

    color: '#ffb7c9', // 花びらの色
    shadow: '0 4px 10px rgba(170,90,120,0.24)' // 花びらの影。消すなら 'none'
  };

  function initSakuraSimple() {
    var layer = document.getElementById('sakura-layer-simple');
    if (!layer) return;

    if (layer.getAttribute('data-sakura-init') === 'done') return;
    layer.setAttribute('data-sakura-init', 'done');

    function getVW() {
      return Math.max(
        window.innerWidth || 0,
        document.documentElement.clientWidth || 0
      );
    }

    function getVH() {
      return Math.max(
        window.innerHeight || 0,
        document.documentElement.clientHeight || 0
      );
    }

    function isMobileView() {
      return getVW() <= SAKURA_CONFIG.mobileWidth;
    }

    var count = 0;
    var timer = null;

    function rand(min, max) {
      return Math.random() * (max - min) + min;
    }

    function createPetal() {
      var vw = getVW();
      var vh = getVH();
      var isMobile = isMobileView();

      var maxItems = isMobile ? SAKURA_CONFIG.maxItems.mobile : SAKURA_CONFIG.maxItems.pc;
      if (count >= maxItems) return;

      var el = document.createElement('span');
      el.className = 'sakura-petal';

      var flip = Math.random() < 0.5 ? 1 : -1;

      var sizeMin = isMobile ? SAKURA_CONFIG.size.mobileMin : SAKURA_CONFIG.size.pcMin;
      var sizeMax = isMobile ? SAKURA_CONFIG.size.mobileMax : SAKURA_CONFIG.size.pcMax;
      var size = rand(sizeMin, sizeMax);

      var baseX = rand(10, Math.max(11, vw - size - 10));

      var drift = isMobile ? SAKURA_CONFIG.movement.mobileDrift : SAKURA_CONFIG.movement.pcDrift;
      var wave = isMobile ? SAKURA_CONFIG.movement.mobileWave : SAKURA_CONFIG.movement.pcWave;

      var driftX = rand(-drift, drift);
      var localWave = rand(wave * 0.8, wave * 1.2);

      var durationMin = isMobile ? SAKURA_CONFIG.speed.mobileMin : SAKURA_CONFIG.speed.pcMin;
      var durationMax = isMobile ? SAKURA_CONFIG.speed.mobileMax : SAKURA_CONFIG.speed.pcMax;
      var duration = rand(durationMin, durationMax);

      var baseRotate = rand(SAKURA_CONFIG.rotation.baseMin, SAKURA_CONFIG.rotation.baseMax);
      var flutterSpeed = rand(SAKURA_CONFIG.rotation.flutterSpeedMin, SAKURA_CONFIG.rotation.flutterSpeedMax);
      var flutterAngle = rand(SAKURA_CONFIG.rotation.angleMin, SAKURA_CONFIG.rotation.angleMax);

      var opacityMin = isMobile ? SAKURA_CONFIG.opacity.mobileMin : SAKURA_CONFIG.opacity.pcMin;
      var opacityMax = isMobile ? SAKURA_CONFIG.opacity.mobileMax : SAKURA_CONFIG.opacity.pcMax;
      var opacity = rand(opacityMin, opacityMax);

      el.style.left = '0px';
      el.style.top = '-60px';
      el.style.width = size + 'px';
      el.style.height = (size * 0.72) + 'px';
      el.style.opacity = opacity;
      el.style.background = SAKURA_CONFIG.color;
      el.style.boxShadow = SAKURA_CONFIG.shadow;

      layer.appendChild(el);
      count++;

      var start = performance.now();
      var totalY = vh + 120;

      function animate(now) {
        var progress = (now - start) / duration;

        if (progress >= 1) {
          if (el.parentNode) {
            el.parentNode.removeChild(el);
          }
          count--;
          return;
        }

        var y = totalY * progress;

        var x =
          baseX +
          (driftX * progress) +
          Math.sin(progress * Math.PI * 3.2) * localWave;

        var rotate =
          baseRotate +
          Math.sin(progress * Math.PI * flutterSpeed) * flutterAngle;

        var fade = 1;
        if (progress > 0.82) {
          fade = 1 - ((progress - 0.82) / 0.18);
        }

        el.style.transform =
          'translate3d(' + x + 'px, ' + y + 'px, 0) rotate(' + rotate + 'deg) scaleX(' + flip + ')';

        el.style.opacity = opacity * fade;

        requestAnimationFrame(animate);
      }

      requestAnimationFrame(animate);
    }

    function startLoop() {
      if (timer) clearInterval(timer);

      var isMobile = isMobileView();
      var interval = isMobile ? SAKURA_CONFIG.interval.mobile : SAKURA_CONFIG.interval.pc;

      createPetal();
      createPetal();
      createPetal();

      timer = setInterval(createPetal, interval);
    }

    startLoop();

    window.addEventListener('resize', function () {
      startLoop();
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initSakuraSimple);
  } else {
    initSakuraSimple();
  }
})();
</script>