【Javascript】何時間でも触っていたい。動く幾何学模様背景のparticles.jsを試す

まずはこちら御覧ください。

See the Pen particles.js by Vincent Garreau (@VincentGarreau) on CodePen.0

マウスオーバーで反応するし、クリックで増殖したりします。
なんだか気持ちいいですね。ずっと見ていられます。

使い方はいたって簡単

particles-jsというものをつかいます。

VincentGarreau/particles.js

HTMLには以下のように記述します。

<div id="particles-js"></div>
<script src="particles.js"></script>

jsではライブラリのほか、カラーやクリック押下時のアクションを選択できますので、そちらを記述していきます。

/* particlesJS('dom-id', params);
/* @dom-id : set the html tag id [string, optional, default value : particles-js]
/* @params: set the params [object, optional, default values : check particles.js] */

/* config dom id (optional) + config particles params */
particlesJS('particles-js', {
  particles: {
    color: '#fff',
    color_random: false,
    shape: 'circle', // "circle", "edge" or "triangle"
    opacity: {
      opacity: 1,
      anim: {
        enable: true,
        speed: 1.5,
        opacity_min: 0,
        sync: false
      }
    },
    size: 4,
    size_random: true,
    nb: 150,
    line_linked: {
      enable_auto: true,
      distance: 100,
      color: '#fff',
      opacity: 1,
      width: 1,
      condensed_mode: {
        enable: false,
        rotateX: 600,
        rotateY: 600
      }
    },
    anim: {
      enable: true,
      speed: 1
    }
  },
  interactivity: {
    enable: true,
    mouse: {
      distance: 300
    },
    detect_on: 'canvas', // "canvas" or "window"
    mode: 'grab', // "grab" of false
    line_linked: {
      opacity: .5
    },
    events: {
      onclick: {
        enable: true,
        mode: 'push', // "push" or "remove"
        nb: 4
      },
      onresize: {
        enable: true,
        mode: 'out', // "out" or "bounce"
        density_auto: false,
        density_area: 800 // nb_particles = particles.nb * (canvas width *  canvas height / 1000) / density_area
      }
    }
  },
  /* Retina Display Support */
  retina_detect: true
});

上記のサンプルJSの内、コメント(//)がある部分が基本的に選択できるオプションです。

使ってみた

See the Pen particles.js by Tsukasa Nagata (@nt-uni) on CodePen.0

マウスオーバーとクリックのアクションはfalseで無効にし、単純に動く背景として使ってみました。
もちろん線の色も編集できるので、もう少し控えめにしたらより使えそうな感じですね。

まとめ

これだけダイナミックに動く背景を簡単に実装できるのは魅力的ですね。
もし印象的なデザインで攻めることがあれば、活用してみたいと思います!

フォローして続編をチェック

@universionsをフォロー