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

春の時期、自分のサイトに桜の花弁を降らせる演出用のコードを置いておきます。

なおコードの各数値は筆者が自前用にカスタマイズしたサンプル状態のままです。

お好みでカスタマイズするなりしてお使いください。（めんどうな方はそのままコピペでもオーケーです）

<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>

難しいことはなく、基本的にはワードプレスでカスタムhtmlブロックを呼び出し、HTMLのところに貼り付けるだけでオーケー、1ページに1つだけで良いです（同じページ内に複数回貼り付けないでください）

サイト全体に反映させる場合、とりあえず筆者は外観→ウィジェット→コンテンツ下部にカスタムhtmlを入れる→その中に貼り付け……という風にしています。

下に自分用に作ったマニュアルもどきもおいておきました。

基本的なカスタマイズのやり方を書いていますので、コピペでメモに貼るなどして参考にしてください。

〇カスタマイズ〇

☆前書き☆　

基本的にはコード内のいくつかの数値を変更して調整。
　押さえておくべきことは2点。
「mobile 4,」「pc: 15」という部分の「4」「15」を別な数値に変更することで反映されるということ、この場合での「4」がスマホやタブレット、「15」がpcモニタークラスのデバイスで反映される値ということ。（ここでしきい値などの話は省略、コード内にはメモ代わりに記載）
　
・花びらの数を変える

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

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

これを。

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

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

――などにすると、花びらの最大値と降ってくる数が増える。

ただし増やしすぎると重くなるのでほどほどに。

・花びらの大きさを変える

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

それぞれの数値を変更すると花びらの最小（sizeMin）～最大（sizeMax）サイズ幅を変更できる。

↓だと最小も最大も大きくなる

例

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

・落ちる速さを変える

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

ここはミリ秒。

つまりこう。

1000 = 1秒
5000 = 5秒
10000 = 10秒

数値を小さくすると速く落ちる。
数値を大きくするとゆっくり落ちる。

例　ゆっくりめ

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

・横に流れる幅を変える

movement: {
      mobileDrift: 45, // スマホ：横に流れる幅
      pcDrift: 30,    // PC：横に流れる幅

数値を大きくすると、花びらが左右に大きく流れる

movement: {
      mobileDrift: 60, // スマホ：横に流れる幅
      pcDrift: 100,    // PC：横に流れる幅     

――とかでも良い。

ただし数値を大きくしすぎると、画面外に飛びやすいので注意。

・ふわふわ揺れる幅を変える

mobileWave: 12,  // スマホ：ふわふわ揺れる幅
      pcWave: 50      // PC：ふわふわ揺れる幅
    },

数値を大きくすると、左右にゆらゆら揺れる。

わりとゆらゆら

mobileWave: 24,  // スマホ：ふわふわ揺れる幅
      pcWave: 70      // PC：ふわふわ揺れる幅
    },

――――――――

〇プラスアルファ設定

・花びらの透明度を変える

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

0が完全透明で1が完全不透明。

濃くしたいなら、0.80や0.90など1に近づける。

薄くしたいなら、0.35や0.21など0に近づける。

・花びらが出る間隔を変える

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

数値を小さくすると花びらが頻繁に出ます。
数値を大きくすると控えめになります。

多く出す

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

控えめ

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

・花びらの色や影を変える

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

白っぽい桜にするなら

color: '#ffdce8',　とか

濃いピンクにするなら

color: '#ff8fb3',　など

影を消すなら

shadow: 'none',

影を濃くするなら

shadow:  '0 5px 12px rgba(170,90,120,0.35)',　とかにする。

―――――――――――――――――

コード＆カスタマイズマニュアル　Ver1.0

※テーマやサイト構成によっては、表示される範囲が異なる場合があります。
　コードの使用によって、意図しない不具合や損害があっても当サイトでは責任を負いかねることをご了承ください。

了。

開くとコードが出てきます+

コメント