質問編集履歴
2
公式ページのリンクを追記しました
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -120,6 +120,18 @@
|
|
|
120
120
|
|
|
121
121
|
|
|
122
122
|
|
|
123
|
+
ライブラリ公式ページ
|
|
124
|
+
|
|
125
|
+
https://vincentgarreau.com/particles.js/
|
|
126
|
+
|
|
127
|
+
|
|
128
|
+
|
|
129
|
+
ライブラリ紹介記事
|
|
130
|
+
|
|
131
|
+
https://liginc.co.jp/191958
|
|
132
|
+
|
|
133
|
+
https://on-ze.com/archives/4406
|
|
134
|
+
|
|
123
135
|
|
|
124
136
|
|
|
125
137
|
---
|
1
質問内容を整理し、自分で試した結果などを追記しました
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
|
|
69
69
|
<div id="mv">
|
|
70
70
|
|
|
71
|
-
<div class="particles-js1"></div>
|
|
71
|
+
<div class="particles-js1"></div><!-- ここで使用 -->
|
|
72
72
|
|
|
73
73
|
<div class="wrap"></div>
|
|
74
74
|
|
|
@@ -80,7 +80,7 @@
|
|
|
80
80
|
|
|
81
81
|
<div id="sec01">
|
|
82
82
|
|
|
83
|
-
<div class="particles-js2"></div>
|
|
83
|
+
<div class="particles-js2"></div><!-- ここで使用 -->
|
|
84
84
|
|
|
85
85
|
<div class="wrap"></div>
|
|
86
86
|
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
|
|
91
91
|
<div id="sec02">
|
|
92
92
|
|
|
93
|
-
<div class="particles-js3"></div>
|
|
93
|
+
<div class="particles-js3"></div><!-- ここで使用 -->
|
|
94
94
|
|
|
95
95
|
<div class="wrap"></div>
|
|
96
96
|
|
|
@@ -102,24 +102,84 @@
|
|
|
102
102
|
|
|
103
103
|
</body>
|
|
104
104
|
|
|
105
|
+
<!-- できればこのようにいくつでも使用できるようにしたいです -->
|
|
106
|
+
|
|
105
107
|
|
|
106
108
|
|
|
107
109
|
```
|
|
108
110
|
|
|
109
111
|
|
|
110
112
|
|
|
111
|
-
|
|
113
|
+
jsのソースは、質問の文字数制限でソースを貼れなかったのでparticles.jsを使用した他人様のページをご参照ください
|
|
112
114
|
|
|
113
|
-
※質問の文字数制限でソースを貼れず申し訳ありません
|
|
114
|
-
|
|
115
|
-
※
|
|
115
|
+
※内容は私が使用しているものと全く同じです
|
|
116
116
|
|
|
117
117
|
|
|
118
118
|
|
|
119
|
-
[particles.js
|
|
119
|
+
[particles.js参考](https://on-ze.com/demo/js-particles.js/particles.js)
|
|
120
120
|
|
|
121
121
|
|
|
122
122
|
|
|
123
123
|
|
|
124
124
|
|
|
125
|
+
---
|
|
126
|
+
|
|
127
|
+
### 以下2点、自分で試してみたことです
|
|
128
|
+
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
１）上記ソース1493行目の
|
|
132
|
+
|
|
133
|
+
document.getElementById(tag_id)
|
|
134
|
+
|
|
135
|
+
をidでなくclassで取得すればどうかと思い
|
|
136
|
+
|
|
137
|
+
↓
|
|
138
|
+
|
|
139
|
+
document.getElementsByClassName(tag_id)
|
|
140
|
+
|
|
141
|
+
に変えたのですが
|
|
142
|
+
|
|
143
|
+
|
|
144
|
+
|
|
145
|
+
1495行目でClassNameが取得できないとエラーが出て上手くいきません。
|
|
146
|
+
|
|
147
|
+
|
|
148
|
+
|
|
149
|
+
【上記ソース1493～1495行】
|
|
150
|
+
|
|
151
|
+
```javascript
|
|
152
|
+
|
|
153
|
+
/* pJS elements */
|
|
154
|
+
|
|
155
|
+
var pJS_tag = document.getElementById(tag_id),
|
|
156
|
+
|
|
157
|
+
pJS_canvas_class = 'particles-js-canvas-el',
|
|
158
|
+
|
|
159
|
+
exist_canvas = pJS_tag.getElementsByClassName(pJS_canvas_class);
|
|
160
|
+
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
|
|
164
|
+
|
|
165
|
+
|
|
166
|
+
|
|
167
|
+
---
|
|
168
|
+
|
|
169
|
+
２）id名でしか使えないのであればparticles.jsをコピーしてファイル名を変えて複数のidに分けて実装（<div id="particles-js">、<div id="particles-js2">という具合で）しましたが
|
|
170
|
+
|
|
171
|
+
|
|
172
|
+
|
|
173
|
+
これもうまくいきませんでした。
|
|
174
|
+
|
|
175
|
+
（そもそもこの方法だとページが重たくなるのであまり現実的ではないと考えています…）
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
---
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
以上、初歩的な質問内容で申し訳ありませんが
|
|
184
|
+
|
|
125
|
-
|
|
185
|
+
何卒よろしくお願いいたします！
|