幾何学的なアニメーション particles.js スマホ表示だと重い場合

saikisaiki
  • particles.js

これで幾何学的なアニメーションを簡単にwebサイトに入れることができるが，
maxParticlesの設定数値を10くらいにしないとカクカクする．

以下のような感じでスマホ表示用とPCとで設定分けられるかと思います．

<script type="text/javascript">
var particles = Particles.init({
  selector: '.background',
  sizeVariations: 1,
    color: ['#00bbdd', '#404B69', '#DBEDF3'],
    connectParticles: true,
                
        //PC用
    maxParticles: 50,

    // レスポンシブ用ブレイクポイントとパーティクル値を配列で設定できる
    responsive: [
      {
        breakpoint: 768,
        options: {
          maxParticles: 10,
        }
      },
    ]

});
</script>