質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.49%

  • JavaScript

    16458questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQueryプラグイン

    501questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

particles.jsをclassで複数設置する方法

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 324

massa0413

score 6

particles.jsというライブラリを使って幾何学模様のアニメーションを実装しているのですが、
上記ライブラリを以下のように使用する方法が分からずに困っています

有識者の方にお助けいただければ幸いです。

実現したい仕様
・idではなくclassを指定した箇所に実装したい

以下、ソースになります
よろしくお願いいたします!

【現状】

    <body>
            <div id="mv">
                <div id="particles-js"></div>
                <div class="wrap"></div>
            </div>
            <!-- /#mv -->

            <div id="sec01">
                <div class="wrap">
                </div>
            </div><!-- /#sec01 -->

        <script src="/js/particles.js"></script>
    </body>


↓ ↓ ↓ ↓ ↓
【希望例】

    <body>
            <div id="mv">
                <div class="particles-js1"></div><!-- ここで使用 -->
                <div class="wrap"></div>
            </div>
            <!-- /#mv -->

            <div id="sec01">
                <div class="particles-js2"></div><!-- ここで使用 -->
                <div class="wrap"></div>
            </div><!-- /#sec01 -->

            <div id="sec02">
                <div class="particles-js3"></div><!-- ここで使用 -->
                <div class="wrap"></div>
            </div><!-- /#sec02 -->

        <script src="/js/particles.js"></script>
    </body>
<!-- できればこのようにいくつでも使用できるようにしたいです -->

jsのソースは、質問の文字数制限でソースを貼れなかったのでparticles.jsを使用した他人様のページをご参照ください
※内容は私が使用しているものと全く同じです

particles.js参考

ライブラリ公式ページ
https://vincentgarreau.com/particles.js/

ライブラリ紹介記事
https://liginc.co.jp/191958
https://on-ze.com/archives/4406


 以下2点、自分で試してみたことです

1)上記ソース1493行目の
document.getElementById(tag_id)
をidでなくclassで取得すればどうかと思い

document.getElementsByClassName(tag_id)
に変えたのですが

1495行目でClassNameが取得できないとエラーが出て上手くいきません。

【上記ソース1493~1495行】

  /* pJS elements */
  var pJS_tag = document.getElementById(tag_id),
      pJS_canvas_class = 'particles-js-canvas-el',
      exist_canvas = pJS_tag.getElementsByClassName(pJS_canvas_class);

2)id名でしか使えないのであればparticles.jsをコピーしてファイル名を変えて複数のidに分けて実装(<div id="particles-js">、<div id="particles-js2">という具合で)しましたが

これもうまくいきませんでした。
(そもそもこの方法だとページが重たくなるのであまり現実的ではないと考えています…)


以上、初歩的な質問内容で申し訳ありませんが
何卒よろしくお願いいたします!

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/06/20 09:36

    ライブラリはプラグイン公式ページまたは紹介している記事をご提示ください。

    キャンセル

  • massa0413

    2018/06/20 09:41

    コメントをいただきありがとうございます! 公式ページ  https://vincentgarreau.com/particles.js/ 紹介記事  https://liginc.co.jp/191958  https://on-ze.com/archives/4406 上記となります! よろしくお願いいたします

    キャンセル

  • mts10806

    2018/06/20 09:42

    質問を編集してください。こちらのコメント欄はデフォルトでは非表示のため、他の回答者の目に付かない可能性が高くなります。

    キャンセル

  • massa0413

    2018/06/20 11:29

    ありがとうございます!質問を編集いたしました!

    キャンセル

回答 1

checkベストアンサー

+1

particlesJS()を使用できる準備が出来ているなら、(particles.js読んでるので準備は出来ているはず)
particlesJS(要素id,params)をコールすればいくつでも配置できるけど

このライブラリの内部構造自体が、particlesJSもpJSも要素のidを引数にして動作してるので、idを使わずにと言うのは無理な気がする

2)id名でしか使えないのであれば ...略...(そもそもこの方法だとページが重たくなるのであまり現実的ではないと考えています…)

重たくなるとはどういった意味ですか?
「id="particles-js2"」の文字数?
「particlesJS()の多数配置」による計算負荷?
目標としている事が後者なので後者はないとすると文字数なのかな、classとidが違うだけで文字数って事でも無い気がするんだけど

ちなみに、複数配置する場合でもparticles.jsはひとつだけで構わないです。
particlesJS()をコールすると内部でnewしてくれるので

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/02 22:31

    ご回答ありがとうございます。
    また、伝わりづらい質問内容で失礼しました。
    ご指摘の通りid,paramsをコールすることで複数設置できました!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16458questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQueryプラグイン

    501questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。