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にそれぞれ異なる外観の効果を描写しています。
--
以上