particles.jsの使い方 複数設置する

TIPS 0 Takuya Kobayashi

particles.jsデモ

particles.jsを設置する

particles.jsをダウンロードし、次のように設置。

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="js/particles.min.js"></script>

設定ファイルを作成する

particles.jsのサイトの右サイドバーのパラメーターを弄ってカスタマイズ。Download current configをクリックして設定ファイルをダウンロード。

js/particlesjs-config.jsonという設定ファイルを読み出し、#js-particlesに描写します。

<script>
particlesJS.load( 'js-particles', 'js/particlesjs-config.json');
</script>

particles.jsを複数設置する

particles.jsを複数設置するには次のようにします。

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="js/particles.min.js"></script>
<script>
particlesJS.load( 'js-particles', 'js/particlesjs-config.json');
particlesJS.load( 'js-particles-2', 'js/particlesjs-config-2.json');
</script>

#js-particlesと#js-particles-2にそれぞれ異なる外観の効果を描写しています。

particles.jsデモ

 

--
以上