前提・実現したいこと
particles.jsを、読み込み画面が終了したあとに実行したいです。
(即実行すると、要素の幅と高さがとれないのか、表示されません。)
(https://vincentgarreau.com/particles.js/)
発生している問題・エラーメッセージ
現状は
ブラウザのウィンドウをドラッグで動かすとparticles.jsのアニメーションが表示されるのですが、
ページの読み込み画面が終了してページを開いた瞬間は
particles.jsで出力されるcanvasにwidth="0" height="0"がついており
html
1<canvas class="particles-js-canvas-el" width="0" height="0" style="width: 100%; height: 100%;"></canvas> 2```アニメーションが表示されません。 3 4このcanvasの親要素(#wrapper)が、デフォルトでdisplay:none;になっており、 5ページ読み込み完了後に別のjsで動的にdisplay:block;になっているため、 6 7おそらくこれが原因でparticles.jsが高さと幅を取得できず 8ウィンドウ幅を動かさないと表示できなくなっているとはわかっているのですが、対処方法がわかりません。 9 10### 試したこと 11 12particles.jsの中身を 13読み込み完了後に実行する 14```javascript 15/*particles.js*/ 16window.onload = function () { 17 // ここにparticles.jsの中身 18}; 19```で括ったりしてみました。 20 21particles.jsの中身を 22親要素である#wrapperが可視化されたあとにに実行する 23```javascript 24/*particles.js*/ 25if ($('#wrapper').is(':visible')) { 26 // ここにparticles.jsの中身 27} 28```で括ったり… 29 30また、canvasの属性width・heightをjQueryで上書きすればいいかと試みましたが、 31上書きされた数値がはいっているだけで反応せず、無意味でした。 32```javascript 33 $(function(){ 34 $(".particles-js-canvas-el").attr("width","1500"); 35 $(".particles-js-canvas-el").attr("height","450"); 36});
補足情報など
ブラウザのウィンドウをドラッグで動かすと、
canvasの属性であるwidthとheightが変化し、アニメーションが表示されます。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/06/01 13:04 編集