particles.jsを使ってページ全体に幾何学模様のアニメーション表示する方法｜DAD UNION

particles.jsを使ってページ全体に幾何学模様のアニメーション表示する方法をご紹介します。

Contents

particles.jsを使ってページ全体に幾何学模様のアニメーション表示するCSS記述
particles.jsを使ってページ全体に幾何学模様のアニメーション表示するHTML記述
particles.jsを使ってページ全体に幾何学模様のアニメーション表示するJavaScriptの記述
particles.jsを使ってページ全体に幾何学模様のアニメーション表示するデモページ
ソース元：particles.js – A lightweight JavaScript library for creating particles

particles.jsを使ってページ全体に幾何学模様のアニメーション表示するCSS記述

※ページ全体に幾何学模様のアニメーション表示するエリア（#particles-js）のCSS記述です。必要に応じて変更して下さい。

<style>
* {
  padding: 0;
  margin: 0;
}
body {
  font-size: 18px;
  text-align: center;
}
h1{
  width: 100%;
  text-align: center;
  font-size: 24px;
  padding: 20px 0 40px 0;
  line-height: 1.8em;
  position: absolute;
  color: #ffffff;
}
#particles-js{
  width: 100%;
  height: 100%;
  background-color: #000;
  background-image: url('');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
</style>

particles.jsを使ってページ全体に幾何学模様のアニメーション表示するHTML記述

※ページ全体に幾何学模様のアニメーション表示するエリア（id=”particles-js”）を用意します。その他、必要に応じて変更して下さい。

<h1>particles.jsを使ってページ全体に幾何学模様のアニメーションを表示してます。</h1>

<div id="particles-js"></div>

particles.jsを使ってページ全体に幾何学模様のアニメーション表示するJavaScriptの記述

※particles.jsファイルを読み込みます。particlesJS(‘アニメーション表示エリアのid’,{アニメーションオプション})を記述することで、アニメーション表示エリアエリアでオプションで設定した値のアニメーションが表示されます。オプションはGitHub particles.jsの「Options」を参照して下さい。

<script src="particles.js"></script>
<script>
particlesJS('particles-js',
  
  {
    "particles": {
      "number": {
        "value": 80,
        "density": {
          "enable": true,
          "value_area": 800
        }
      },
      "color": {
        "value": "#ffffff"
      },
      "opacity": {
        "value": 0.6,
        "random": false,
        "anim": {
          "enable": false,
          "speed": 1,
          "opacity_min": 0.1,
          "sync": false
        }
      },
      "size": {
        "value": 30,
        "random": true,
        "anim": {
          "enable": false,
          "speed": 40,
          "size_min": 0.1,
          "sync": false
        }
      },
      "line_linked": {
        "enable": true,
        "distance": 150,
        "color": "#ffffff",
        "opacity": 0.4,
        "width": 1
      },
      "move": {
        "enable": true,
        "speed": 8,
        "direction": "none",
        "random": false,
        "straight": false,
        "out_mode": "out",
        "attract": {
          "enable": false,
          "rotateX": 300,
          "rotateY": 1200
        }
      }
    },
    "interactivity": {
      "detect_on": "canvas",
      "events": {
        "onhover": {
          "enable": true,
          "mode": "repulse"
        },
        "onclick": {
          "enable": true,
          "mode": "push"
        },
        "resize": true
      },
      "modes": {
        "grab": {
          "distance": 400,
          "line_linked": {
            "opacity": 1
          }
        },
        "bubble": {
          "distance": 400,
          "size": 40,
          "duration": 2,
          "opacity": 8,
          "speed": 3
        },
        "repulse": {
          "distance": 200
        },
        "push": {
          "particles_nb": 4
        },
        "remove": {
          "particles_nb": 2
        }
      }
    }
  }

);
</script>