幾何学模様を簡単に作成できる「particles.js」を使用してみた
2020.05.22
みなさま、こんにちは。
今回は幾何学的模様を簡単に作成できる「particles.js」を使ってみました。
jQueryを読み込む必要もなく、シンプルでカスタマイズも簡単なので、ぜひ使用してみてください。
プラグインで簡単「particles.js」の使い方
今回は、ちょうどいいところにあった、本サイトのヘッダー画像を参考にすることにしました。
デモサイトを作成したのでご確認ください。
【DEMO】幾何学的模様を簡単に作成できる「particles.js」を使用してみた
事前準備
まずは、https://vincentgarreau.com/particles.js/ここからプラグインをダウンロードしてください。
ダウンロードした圧縮ファイルに particles.min.js というファイルがありますので、そちらを使用します。
任意の名前でHTMLファイルを作成し、
|
1 2 |
<script src="/path/particles.min.js"></script> <script src="/path/init.js"></script> |
上記のようにプラグインを読み込んでください。
init.js は実行するためのJavascriptになりますので、名前は任意で決めてください。
ここでは init.jsという名前にしました。
次にHTMLファイルのコンテンツを書いていきます。
|
1 |
<div id="js-particles"></div> |
幾何学模様が描かれる箇所になります。
今回はわかりやすいように、
css に
|
1 2 3 4 |
#js-particles { width: 100vw; height: 100vh; } |
を指定しました。
これで準備は整いました。
幾何学模様を描く「particles.js」を実行
最後にとりあえず読み込んでおいた init.js に下記、ソースを記載してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 |
particlesJS('js-particles', { "particles": { "number": { // シェイプの数 "value": 200, "density": { "enable": true, // シェイプの密集度 "value_area": 800 } }, "color": { "value": "#ffffff" }, "shape": { // //シェイプの形（circle:丸、edge:四角、triangle:三角、polygon:多角形、star:星型、image:画像） "type": "circle", "stroke": { //シェイプの外線の太さ "width": 0, "color": "#ffffff" }, //typeをpolygonにした時の設定 "polygon": { "nb_sides": 5 }, //typeをimageにした時の設定 "image": { "src": "img/github.svg", "width": 100, "height": 100 } }, "opacity": { //シェイプの透明度 "value": 0.5, //シェイプの透明度をランダムにするか否か "random": true, "anim": { //シェイプの透明度をアニメーションさせるか否か "enable": false, //アニメーションのスピード "speed": 10, //透明度の最小値 "opacity_min": 0.1, //全てのシェイプを同時にアニメーションさせるか否か "sync": false } }, "size": { //シェイプの大きさ "value": 5, //シェイプの大きさをランダムにするか否か "random": true, "anim": { //シェイプの大きさをアニメーションさせるか否か "enable": false, //アニメーションのスピード "speed": 40, //大きさの最小値 "size_min": 0.1, //全てのシェイプを同時にアニメーションさせるか否か "sync": false } }, "line_linked": { //線を表示するか否か "enable": true, //線をつなぐシェイプの間隔 "distance": 175, //線の色 "color": "#ffffff", //線の透明度 "opacity": 0.4, //線の太さ "width": 1 }, "move": { //シェイプの動かすか "enable": true, //シェイプの動くスピード "speed": 10, //エリア全体の動き(none、top、top-right、right、bottom-right、bottom、bottom-left、left、top-leftより選択) "direction": "none", "random": false, //個々のシェイプの動きを止めるか否か "straight": false, //エリア外に出たシェイプの動き(out、bounceより選択) "out_mode": "out", "attract": { "enable": false, "rotateX": 600, "rotateY": 1200 } } }, "interactivity": { "detect_on": "canvas", "events": { //マウスオーバーが有効か否か "onhover": { "enable": false, "mode": "repulse" }, "onclick": { //クリックが有効か否か "enable": false, "mode": "push" }, "resize": true }, // 上記2つの処理詳細 "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 } } }, "retina_detect": true, "config_demo": { "hide_card": false, "background_color": "#b61924", "background_image": "", "background_position": "50% 50%", "background_repeat": "no-repeat", "background_size": "cover" } } ); |
実行すれば背景で幾何学模様がウヨウヨと動いていると思います。
今回はヘッダー画像をモデルに作成したので、 CSS に、
|
1 |
background-color: #2e505c; |
を指定しています。
すこし違いはありますがヘッダー画像に似たものができたのではないでしょうか。
init.js に解説をコメントアウトしておきましたので、すこしいじって遊んでみてください。
マウスホバーで模様が逃げるなどのカスタマイズも可能ですので、動きのあるサイトが作れるのではないでしょうか。
個人的にはあまり動きすすぎるのも考え物だと思いますが……。
