質問編集履歴
2
公式ページのリンクを追記しました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -59,7 +59,13 @@
|
|
|
59
59
|
|
|
60
60
|
[particles.js参考](https://on-ze.com/demo/js-particles.js/particles.js)
|
|
61
61
|
|
|
62
|
+
ライブラリ公式ページ
|
|
63
|
+
https://vincentgarreau.com/particles.js/
|
|
62
64
|
|
|
65
|
+
ライブラリ紹介記事
|
|
66
|
+
https://liginc.co.jp/191958
|
|
67
|
+
https://on-ze.com/archives/4406
|
|
68
|
+
|
|
63
69
|
---
|
|
64
70
|
### 以下2点、自分で試してみたことです
|
|
65
71
|
|
1
質問内容を整理し、自分で試した結果などを追記しました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -33,31 +33,61 @@
|
|
|
33
33
|
```html
|
|
34
34
|
<body>
|
|
35
35
|
<div id="mv">
|
|
36
|
-
<div class="particles-js1"></div>
|
|
36
|
+
<div class="particles-js1"></div><!-- ここで使用 -->
|
|
37
37
|
<div class="wrap"></div>
|
|
38
38
|
</div>
|
|
39
39
|
<!-- /#mv -->
|
|
40
40
|
|
|
41
41
|
<div id="sec01">
|
|
42
|
-
<div class="particles-js2"></div>
|
|
42
|
+
<div class="particles-js2"></div><!-- ここで使用 -->
|
|
43
43
|
<div class="wrap"></div>
|
|
44
44
|
</div><!-- /#sec01 -->
|
|
45
45
|
|
|
46
46
|
<div id="sec02">
|
|
47
|
-
<div class="particles-js3"></div>
|
|
47
|
+
<div class="particles-js3"></div><!-- ここで使用 -->
|
|
48
48
|
<div class="wrap"></div>
|
|
49
49
|
</div><!-- /#sec02 -->
|
|
50
50
|
|
|
51
51
|
<script src="/js/particles.js"></script>
|
|
52
52
|
</body>
|
|
53
|
+
<!-- できればこのようにいくつでも使用できるようにしたいです -->
|
|
53
54
|
|
|
54
55
|
```
|
|
55
56
|
|
|
56
|
-
以下、particles.jsです
|
|
57
|
-
|
|
57
|
+
jsのソースは、質問の文字数制限でソースを貼れなかったのでparticles.jsを使用した他人様のページをご参照ください
|
|
58
|
-
※
|
|
58
|
+
※内容は私が使用しているものと全く同じです
|
|
59
59
|
|
|
60
|
-
[particles.js
|
|
60
|
+
[particles.js参考](https://on-ze.com/demo/js-particles.js/particles.js)
|
|
61
61
|
|
|
62
62
|
|
|
63
|
+
---
|
|
64
|
+
### 以下2点、自分で試してみたことです
|
|
65
|
+
|
|
66
|
+
１）上記ソース1493行目の
|
|
67
|
+
document.getElementById(tag_id)
|
|
68
|
+
をidでなくclassで取得すればどうかと思い
|
|
69
|
+
↓
|
|
70
|
+
document.getElementsByClassName(tag_id)
|
|
71
|
+
に変えたのですが
|
|
72
|
+
|
|
73
|
+
1495行目でClassNameが取得できないとエラーが出て上手くいきません。
|
|
74
|
+
|
|
75
|
+
【上記ソース1493～1495行】
|
|
76
|
+
```javascript
|
|
77
|
+
/* pJS elements */
|
|
78
|
+
var pJS_tag = document.getElementById(tag_id),
|
|
79
|
+
pJS_canvas_class = 'particles-js-canvas-el',
|
|
80
|
+
exist_canvas = pJS_tag.getElementsByClassName(pJS_canvas_class);
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
---
|
|
85
|
+
２）id名でしか使えないのであればparticles.jsをコピーしてファイル名を変えて複数のidに分けて実装（<div id="particles-js">、<div id="particles-js2">という具合で）しましたが
|
|
86
|
+
|
|
87
|
+
これもうまくいきませんでした。
|
|
88
|
+
（そもそもこの方法だとページが重たくなるのであまり現実的ではないと考えています…）
|
|
89
|
+
|
|
90
|
+
---
|
|
91
|
+
|
|
92
|
+
以上、初歩的な質問内容で申し訳ありませんが
|
|
63
|
-
|
|
93
|
+
何卒よろしくお願いいたします！
|