はじめに
JavaScriptを勉強中のプログラミング初心者が書いた記事になります。
particles.jsという背景に動きをつけるライブラリを導入するにあたり、苦労したため備忘録として記事にしました。
導入するparticles.jsとは
公式サイト
背景にアニメーションをつけるライブラリです。
以下の記事にも導入のやり方について記載されています。参考にされてみてください。
上記の記事ではjsファイルとJSONファイルに分けるやり方を紹介しています。
この記事ではjsファイルのみを使用し導入していきます。
環境
筆者はMac PCを使用しています。
ブラウザはchromeを使用しています。
JavaScriptでJSONファイルを使用するときはローカルサーバーを用意しないと動かないようです。
jsファイルのみの場合はローカルサーバーを用意しなくても動きます。
導入方法
この記事ではDefaultのsnowを導入します。
(以下のコードをコピペしても構いません。)
上記の公式サイトへアクセスし、Defaultをクリック、snowを選択。
下に出てきたパラメーターを細かく調整することで、particleの粒の大きさや形、色、動きなどを変更することができます。CSSで背景なども変更可能です。
もしJSONファイルで導入する場合は「→Download current config(json)」で設定したパラメーターの状態でJSONファイルをダウンロードできます。
パラメーターを調整し終えたら、「CodePen」を押してコードを作成してください。
出てきたコードを導入したいファイルにそれぞれ貼り付けます。
下の画像の右側下向きボタンを押し、「Format 〇〇」を選択すると改行のある状態に変更できます。
改行し見やすくなりました。
HTMLのコードの中には、stats.jsというライブラリが入っています。
これはパフォーマンス監視用のライブラリです。FPS、メモリの使用量、描画時間を計測し、ブラウザのパフォーマンスが悪化していないかを監視してくれます。
開発段階では入れといた方がよいですが、本番環境では削除します。
今回はstats.jsをいれたまま、導入します。
ここからはご自分の環境のコードエディタで操作してください。
始めに、同じディレクトリ内に以下のファイルを作成します（名前はお好みで）。
- snow.html
- snow.js
snow.htmlにHTML部分とCSS部分を貼り付けてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>particles.js CDN サンプル</title>
<style>
/* ---- reset ---- */
body {
margin: 0;
font: normal 75% Arial, Helvetica, sans-serif;
}
canvas {
display: block;
vertical-align: bottom;
}
/* ---- particles.js container ---- */
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-color: #b61924;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
z-index: -1;
}
/* ---- stats.js (本番環境では除く) ---- */
.count-particles {
background: #000022;
position: absolute;
top: 48px;
left: 0;
width: 80px;
color: #13e8e9;
font-size: 0.8em;
text-align: left;
text-indent: 4px;
line-height: 14px;
padding-bottom: 2px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
}
.js-count-particles {
font-size: 1.1em;
}
#stats,
.count-particles {
-webkit-user-select: none;
margin-top: 5px;
margin-left: 5px;
}
#stats {
border-radius: 3px 3px 0 0;
overflow: hidden;
}
.count-particles {
border-radius: 0 0 3px 3px;
}
</style>
</head>
<body>
<!-- パーティクル描画領域 -->
<div id="particles-js"></div>
<!-- パーティクル数カウント(本番環境では除く) -->
<div class="count-particles">
<span class="js-count-particles">--</span> particles
</div>
<!-- 入れたいコンテンツなど -->
<div class="content">
<h1>particles.js背景エフェクト</h1>
</div>
<!-- stats.js 本体（CDN）(本番環境では除く)-->
<script src="https://unpkg.com/stats.js@0.17.0/build/stats.min.js"></script>
<!-- particles.js 本体（CDN） -->
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
<!-- 設定を読み込むためのスクリプト(自分で作成したjsファイルを記述) -->
<script src="snow.js"></script>
</body>
</html>
今回はsnow.htmlの中にCSS部分も入れて記述しています。CSSファイルを分けたい方はCSSファイルを作成し、貼り付けてください。
<style></style>の間にCSSでコピーした部分、<body></body>の間にhtmlでコピーした部分を貼り付けました。
ただし、出力されたstats.jsのCDNは古く正しく表示されない可能性があります。
上記のstats.jsのCDNは出力されたURLではなく、
https://unpkg.com/stats.js@0.17.0/build/stats.min.js
を使用しています。
上記のコードでは<h1>タグの文字列を全面に表示したいため、#particles-jsセレクタにz-index: -1を追記し、背景のparticlesを後面に指定しています。
次にsnow.jsファイルにJSのコードを貼り付けます。
particlesJS("particles-js", {
particles: {
number: { value: 400, density: { enable: true, value_area: 800 } },
color: { value: "#fff" },
shape: {
type: "circle",
stroke: { width: 0, color: "#000000" },
polygon: { nb_sides: 5 },
image: { src: "img/github.svg", width: 100, height: 100 }
},
opacity: {
value: 0.5,
random: true,
anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false }
},
size: {
value: 10,
random: true,
anim: { enable: false, speed: 40, size_min: 0.1, sync: false }
},
line_linked: {
enable: false,
distance: 500,
color: "#ffffff",
opacity: 0.4,
width: 2
},
move: {
enable: true,
speed: 6,
direction: "bottom",
random: false,
straight: false,
out_mode: "out",
bounce: false,
attract: { enable: false, rotateX: 600, rotateY: 1200 }
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: { enable: true, mode: "bubble" },
onclick: { enable: true, mode: "repulse" },
resize: true
},
modes: {
grab: { distance: 400, line_linked: { opacity: 0.5 } },
bubble: { distance: 400, size: 4, duration: 0.3, opacity: 1, speed: 3 },
repulse: { distance: 200, duration: 0.4 },
push: { particles_nb: 4 },
remove: { particles_nb: 2 }
}
},
retina_detect: true
});
var count_particles, stats, update;
//if文 if (typeof Stats !== 'undefined') { } else {console.log('Stats.js が読み込まれていません');} 追加
if (typeof Stats !== 'undefined') {
stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = "absolute";
stats.domElement.style.left = "0px";
stats.domElement.style.top = "0px";
document.body.appendChild(stats.domElement);
} else {
console.log('Stats.js が読み込まれていません');
}
count_particles = document.querySelector(".js-count-particles");
update = function () {
//if文 if(stats) {}追加
if (stats) {
stats.begin();
stats.end();
}
if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
}
requestAnimationFrame(update);
};
requestAnimationFrame(update);
上記のコードでは、エラーハンドリングのためコメントアウトで示した部分（if文）を追加しています。
stats.jsが必要ない場合はvar count_particles, stats, update;以降を除いてください。
snow.htmlファイルをブラウザにドラッグ&ドロップで開いてみてください。設定した通りのアニメーションが表示されていると思います。
stats.jsあり
stats.jsなし
表示されていない場合はデベロッパーツールでエラー内容をご確認ください。
参考URL