Q&A
ライブラリはプラグイン公式ページまたは紹介している記事をご提示ください。
particles.jsというライブラリを使って幾何学模様のアニメーションを実装しているのですが、
上記ライブラリを以下のように使用する方法が分からずに困っています
有識者の方にお助けいただければ幸いです。
実現したい仕様
・idではなくclassを指定した箇所に実装したい
以下、ソースになります
よろしくお願いいたします！
【現状】
HTML
1 <body> 2 <div id="mv"> 3 <div id="particles-js"></div> 4 <div class="wrap"></div> 5 </div> 6 <!-- /#mv --> 7 8 <div id="sec01"> 9 <div class="wrap"> 10 </div> 11 </div><!-- /#sec01 --> 12 13 <script src="/js/particles.js"></script> 14 </body> 15
↓ ↓ ↓ ↓ ↓
【希望例】
html
1 <body> 2 <div id="mv"> 3 <div class="particles-js1"></div><!-- ここで使用 --> 4 <div class="wrap"></div> 5 </div> 6 <!-- /#mv --> 7 8 <div id="sec01"> 9 <div class="particles-js2"></div><!-- ここで使用 --> 10 <div class="wrap"></div> 11 </div><!-- /#sec01 --> 12 13 <div id="sec02"> 14 <div class="particles-js3"></div><!-- ここで使用 --> 15 <div class="wrap"></div> 16 </div><!-- /#sec02 --> 17 18 <script src="/js/particles.js"></script> 19 </body> 20<!-- できればこのようにいくつでも使用できるようにしたいです --> 21
jsのソースは、質問の文字数制限でソースを貼れなかったのでparticles.jsを使用した他人様のページをご参照ください
※内容は私が使用しているものと全く同じです
ライブラリ公式ページ
https://vincentgarreau.com/particles.js/
ライブラリ紹介記事
https://liginc.co.jp/191958
https://on-ze.com/archives/4406
以下2点、自分で試してみたことです
１）上記ソース1493行目の
document.getElementById(tag_id)
をidでなくclassで取得すればどうかと思い
↓
document.getElementsByClassName(tag_id)
に変えたのですが
1495行目でClassNameが取得できないとエラーが出て上手くいきません。
【上記ソース1493～1495行】
javascript
1 /* pJS elements */ 2 var pJS_tag = document.getElementById(tag_id), 3 pJS_canvas_class = 'particles-js-canvas-el', 4 exist_canvas = pJS_tag.getElementsByClassName(pJS_canvas_class);
２）id名でしか使えないのであればparticles.jsをコピーしてファイル名を変えて複数のidに分けて実装（<div id="particles-js">、<div id="particles-js2">という具合で）しましたが
これもうまくいきませんでした。
（そもそもこの方法だとページが重たくなるのであまり現実的ではないと考えています…）
以上、初歩的な質問内容で申し訳ありませんが
何卒よろしくお願いいたします！
コメントをいただきありがとうございます！ 公式ページ https://vincentgarreau.com/particles.js/ 紹介記事 https://liginc.co.jp/191958 https://on-ze.com/archives/4406 上記となります！ よろしくお願いいたします
質問を編集してください。こちらのコメント欄はデフォルトでは非表示のため、他の回答者の目に付かない可能性が高くなります。
ありがとうございます！質問を編集いたしました！
回答1件
0
ベストアンサー
particlesJS()を使用できる準備が出来ているなら、(particles.js読んでるので準備は出来ているはず)
particlesJS(要素id,params)をコールすればいくつでも配置できるけど
このライブラリの内部構造自体が、particlesJSもpJSも要素のidを引数にして動作してるので、idを使わずにと言うのは無理な気がする
２）id名でしか使えないのであれば ...略...（そもそもこの方法だとページが重たくなるのであまり現実的ではないと考えています…）
重たくなるとはどういった意味ですか？
「id="particles-js2"」の文字数？
「particlesJS()の多数配置」による計算負荷？
目標としている事が後者なので後者はないとすると文字数なのかな、classとidが違うだけで文字数って事でも無い気がするんだけど
ちなみに、複数配置する場合でもparticles.jsはひとつだけで構わないです。
particlesJS()をコールすると内部でnewしてくれるので
投稿2018/06/28 19:22
総合スコア422
あなたの回答
tips
プレビュー
