【コピペOK】JavaScriptで背景にオシャレなアニメーションを実装する方法

「ウェブサイトをもうちょっとオシャレにしたいけどどうしたらいいのかな」

「JavaScriptを使ってアニメーションを実装してみたいなあ」

本日は上記のような疑問、要望ににお答えする記事となっています。

記事の信頼性

本記事は現在フロントエンドエンジニアとしてウェブサイトを作成しているしのが執筆しております。

コピペでもすぐに使えるようになっていますので、是非ご覧ください。

実装イメージ

では早速ですが実装イメージです。以下のCopePenをご利用ください。

See the Pen by shino (@rytym0720) on CodePen.

解説

では実装について見ていきましょう。

HTML

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

上記のdivで囲まれた範囲内に幾何学模様の背景が適用されるようになります。

<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

<script src="main.js"></script>

上記のCDNコードをbodyの閉じタグの上に記載しましょう。

１つ目のコードでparticle.jsのコードを読み込み、２つ目のコードはローカルのJSファイルを読み込んでいます。

CSS

*{
  margin:0 ;
}

html{
  height: 100%;
}

#wrapper{
  position: relative;
  z-index: 1;
  width:100%;
  height: 100%;
}

#particles-js{ 
  position:fixed;
  z-index:-1;
  width: 100%;
  height: 100%;
  background-color:#000;
}

以下の記述では、では、#wrapperに対して、position:fiexdとし、z-index:-1とすることで、メインの要素の背景にアニメーションが位置するようにしています。

#particles-js{ 
  position:fixed;
  z-index:-1;
  width: 100%;
  height: 100%;
  background-color:#000;
}

position:fixedとすることでアニメーションを固定することも出来ます。

JavaSript

particlesJS("particles-js",{
  "particles":{
    "number":{
      "value":70,
      "density":{
        "enable":true,
        "value_area":800
      }
    },
    "color":{
      "value":"#ddd"
    },
    "shape":{
      "type":"polygon",
      "stroke":{
        "width":0,
      },
  "polygon":{
    "nb_sides":6
  },
  "image":{
    "width":190,
    "height":100
  }
  },
    "opacity":{
    "value":0.664994832269074,
    "random":false,
    "anim":{
      "enable":true,
      "speed":2.2722661797524872,
      "opacity_min":0.08115236356258881,
      "sync":false
    }
    },
    "size":{
      "value":3,
      "random":true,
      "anim":{
        "enable":false,
        "speed":40,
        "size_min":0.1,
        "sync":false
      }
    },
    "line_linked":{
      "enable":true,
      "distance":150,
      "color":"#ffffff",
      "opacity":0.6,
      "width":1
    },
    "move":{
      "enable":true,
      "speed":2,
      "direction":"none",
      "random":false,
      "straight":false,
      "out_mode":"out",
      "bounce":false,
      "attract":{
        "enable":false,
        "rotateX":600,
        "rotateY":961.4383117143238
      }
    }
  },
  "interactivity":{
    "detect_on":"canvas",
    "events":{
      "onhover":{
        "enable":false,
        "mode":"repulse"
      },
  "onclick":{
    "enable":false
  },
  "resize":true
    }
  },
  "retina_detect":true
});

jsはかなり複雑なので一つ一つの説明は割愛しますが、

    "move":{
      "enable":true,
      "speed":2,
      "direction":"none",
      "random":false,
      "straight":false,
      "out_mode":"out",
      "bounce":false,
      "attract":{
        "enable":false,
        "rotateX":600,
        "rotateY":961.4383117143238
      }

こちらの値をいろいろ変えてみると面白いですよ。

例えば、"bounce"の値をtrueに変えてみると、幾何学模様がページのサイドに当たった時に跳ね返るアニメーションとなったり、"out_mode"を"in"に変えると幾何学模様が外に行かずページ内だけで移動したりします。

この辺りも是非いろいろ試してみてください。

それではまた次の記事でお会いしましょう。