[JS]ページの背景に、美しい幾何学状のアニメーションを簡単に実装できる超軽量スクリプト -particles.js

サイト構築 -JavaScript

Post on:2014年11月14日

sponsorsr

最近見かけるようになった背景にCanvasで描いた粒子でできたような幾何学状のアニメーションを簡単に実装できる超軽量スクリプトを紹介します。

↓は静止キャプチャですが、優美なアニメーションで動きます。

particles.js
particles.js -GitHub

particles.jsのデモ
particles.jsの使い方

particles.jsのデモ

デモではparicles.jsの繊細で美しいアニメーションが楽しめます。

particles.js

昨日の記事「落ち着いたカラースキームが使われているページレイアウトやUIのPSD素材のまとめ」で紹介した「Elegant」も似たアニメーションが使われてますね。

Demo: Elegant

particles.jsの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

<body>
  ...
  コンテンツ
  ...
  <script src="http://vincentgarreau.com/particles.js/particles.js"></script>
</body>

Step 2: HTML

コンテンツの一番下あたりに、粒子の元となる空divを用意します。

<body>
  ...
  コンテンツ
  ...
  <div id="particles-js"></div>
  <script src="http://vincentgarreau.com/particles.js/particles.js"></script>
</body>

Step 3: JavaScript

粒子の空divを指定し、エフェクトをスクリプトで設定します。
「app.js」として外部ファイルにすると楽に管理できます。

particlesJS('particles-js', {
    particles: {
        color: '#fff',
        shape: 'circle', // "circle", "edge" or "triangle"
        opacity: 0.5,
        size: 2,
        size_random: true,
        nb: 200,
        line_linked: {
            enable_auto: true,
            distance: 250,
            color: '#fff',
            opacity: 0.5,
            width: 1,
            condensed_mode: {
                enable: true,
                rotateX: 600,
                rotateY: 600
            }
        },
        anim: {
            enable: true,
            speed: 2
        }
    },
    interactivity: {
        enable: false,
        mouse: {
            distance: 250
        },
        detect_on: 'canvas', // "canvas" or "window"
        mode: 'grab'
    },
    /* Retina Display Support */
    retina_detect: false
});

CodePenのデモではカラーや不透明度など変更することができるので、お試しあれ！