Q&A
「Googleで開くと」
↑Chromeのことでしょうか？
ご提示のコードを試してみましたが、Chromeで開いたところ、問題なく動作しました。
前提・実現したいこと
ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。
発生している問題・エラーメッセージ
https://www.webcreatorbox.com/tech/javascript-particles
こちらに掲載されている、「Particles.js」の、2つ目にある
〇に線がついた状態の動きを実現したいと思っています。
Dreamweaverでコードを書いており、DW上のプレビューでは思い通りになっているのですが
ファイルをGoogleで開くと上手くいきません。
色が指定通りで動いてはいるのですが、ただ棒が伸びているだけのようなアニメーションになります。
該当のソースコード
---------------------html---------------------------------
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <link href="test2.css" type="text/css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.3/particles.min.js"></script> </head> <body><canvas class="background"></canvas>
<script> var particles = Particles.init({ selector: '.background', sizeVariations: 10, color: ['#00bbdd', '#404B69', '#DBEDF3'], connectParticles: true }); </script> </body> </html>------------------------------css------------------------------------------
@charset "utf-8";
/* CSS Document */
.background {
position: absolute;
display: block;
top: 0;
left: 0;
z-index: 0;
}
/* Default Styling */
body {
background: #000;
}
試したこと
jsのファイルを読み込むhttpsをヘッド内に書いたりbodyタグ直前に書いたりしましたが
変わりませんでした。
補足情報（FW/ツールのバージョンなど）
使用環境：Windows10 Home バージョン1909
ご確認ありがとうございます。そうです、Chromeのことです。失礼いたしました。
念のため確認させて頂きたく、スクショを追加致しました。
上の画像の状態にしたいのですが、Lhankor_Mhy様の画面ではそのようになっていたということで間違いないでしょうか？
私が確認したものと、一つ目のスクリーンショットとの差異は2点あります。
・背景が白かった
・前面の「Particle.js demo」というボックスは表示されていなかった
ご参考までに、ご提示のコードを試したサンプルです。
質問の変更に合わせて、CSSも追加してあります。
https://jsfiddle.net/Lhankor_Mhy/bL9pj0u5/
お返事遅くなってしまい申し訳ございません。
確認させて頂きました。他のPCで見た場合、Lhankor_Mhu様のようにうまくいくようです。
なので、私が使っているPCのChromeのみが調子が悪いようです。
まだ原因が分からずそのままになってしまっていますが、ひとまずコーディングなどが問題無いということが分かり良かったです。
お時間を割いて下さり、誠にありがとうございました。
環境の問題でしたら、こういうことかもしれないですね。
https://masshiro.blog/webgl-chrome/
Lhankor_Mhy様、ご丁寧にありがとうございます。今事情で試す時間が無いのですが、必ず試してみます。本当にありがとうございます。先になるかもしれませんが、うまくいったらここでご報告いたします。
あなたの回答
tips
プレビュー
