前提・実現したいこと・問題
■前提
particles.jsの幾何学模様をwordpressのサイトに実装しています。
particle.jsのプラグインjsファイル、css,他のjsファイルはfuncitions.phpで読み込んでいます。
PC画面の幾何学模様のデザインは下記の「javascript」のソースコードです。
■問題・実現したいこと
PC画面だといい感じの網の大きさになっているのですが、
スマホ画面になると、網の大きさが密集しすぎになっているので、
スマホ画面のみもう少し大きさを広げたいです。
▼該当サイトURL
http://omo-mice.com/wp/
また、javascriptはほぼコピペなので、
どこで網の大きさを調整していいかも分からない状況です。。。。。
該当のソースコード
hogeがparticles.jsの実装部分です。
PHP
1<?php get_header(); ?> 2 <div class="main"> 3 <div id="hoge"></div> 4 </div> 5<?php get_footer(); ?> 6
css
1/* 2================= 3幾何学模様 4================= 5*/ 6 7#hoge { 8 background-color:white; 9 width: 100%; 10 height: 100vh; 11 margin: 0 auto; 12 position:fixed; 13 top:0; 14 z-index: -10; 15}
javascript
1jQuery(function($){ 2 3particlesJS('hoge',{ 4 "particles":{ 5 6//--シェイプの設定---------- 7 "number":{ 8 "value":200, //シェイプの数 9 "density":{ 10 "enable":false, //シェイプの密集度を変更するか否か 11 "value_area":10 //シェイプの密集度 12 } 13 }, 14 "shape":{ 15 "type":"none", //シェイプの形(circle:丸、edge:四角、triangle:三角、polygon:多角形、star:星型、image:画像) 16 "stroke":{ 17 "width":3, //シェイプの外線の太さ 18 "color":"#bbb" //シェイプの外線の色 19 }, 20 //typeをpolygonにした時の設定 21 "polygon": { 22 "nb_sides":5 //多角形の角の数 23 }, 24 //typeをimageにした時の設定 25 "image": { 26 "src": "img/", 27 "width": 600, 28 "height": 200 29 } 30 }, 31 "color":{ 32 "value":"#505050" //シェイプの色 33 }, 34 "opacity":{ 35 "value":0, //シェイプの透明度 36 "random":true, //シェイプの透明度をランダムにするか否か 37 "anim":{ 38 "enable":false, //シェイプの透明度をアニメーションさせるか否か 39 "speed":10, //アニメーションのスピード 40 "opacity_min":0.1, //透明度の最小値 41 "sync":false //全てのシェイプを同時にアニメーションさせるか否か 42 } 43 }, 44 "size":{ 45 "value":70, //シェイプの大きさ 46 "random":true, //シェイプの大きさをランダムにするか否か 47 "anim":{ 48 "enable":false, //シェイプの大きさをアニメーションさせるか否か 49 "speed":10, //アニメーションのスピード 50 "size_min":0.1, //大きさの最小値 51 "sync":false //全てのシェイプを同時にアニメーションさせるか否か 52 } 53 }, 54//-------------------- 55 56//--線の設定---------- 57 "line_linked":{ 58 "enable":true, //線を表示するか否か 59 "distance":180, //線をつなぐシェイプの間隔 60 "color":"#000", //線の色 61 "opacity":0.4, //線の透明度 62 "width":1 //線の太さ 63 }, 64//-------------------- 65 66//--動きの設定---------- 67 "move":{ 68 "speed":1, //シェイプの動くスピード 69 "straight":false, //個々のシェイプの動きを止めるか否か 70 "direction":"top", //エリア全体の動き(none、top、top-right、right、bottom-right、bottom、bottom-left、left、top-leftより選択) 71 "out_mode":"out" //エリア外に出たシェイプの動き(out、bounceより選択) 72 } 73//-------------------- 74 75 }, 76 77 "interactivity":{ 78 "detect_on":"canvas", 79 "events":{ 80 81//--マウスオーバー時の処理---------- 82 "onhover":{ 83 "enable":false, //マウスオーバーが有効か否か 84 "mode":"bubble" //マウスオーバー時に発動する動き(下記modes内のgrab、repulse、bubbleより選択) 85 }, 86//-------------------- 87 88//--クリック時の処理---------- 89 "onclick":{ 90 "enable":false, //クリックが有効か否か 91 "mode":"push" //クリック時に発動する動き(下記modes内のgrab、repulse、bubble、push、removeより選択) 92 }, 93//-------------------- 94 95 }, 96 97 "modes":{ 98 99//--カーソルとシェイプの間に線が表示される---------- 100 "grab":{ 101 "distance":400, //カーソルからの反応距離 102 "line_linked":{ 103 "opacity":1 //線の透明度 104 } 105 }, 106//-------------------- 107 108//--シェイプがカーソルから逃げる---------- 109 "repulse":{ 110 "distance":200 //カーソルからの反応距離 111 }, 112//-------------------- 113 114//--シェイプが膨らむ---------- 115 "bubble":{ 116 "distance":400, //カーソルからの反応距離 117 "size":60, //シェイプの膨らむ大きさ 118 "opacity":8, //膨らむシェイプの透明度 119 "duration":2, //膨らむシェイプの持続時間(onclick時のみ) 120 "speed":3 //膨らむシェイプの速度(onclick時のみ) 121 }, 122//-------------------- 123 124//--シェイプが増える---------- 125 "push":{ 126 "particles_nb":4 //増えるシェイプの数 127 }, 128//-------------------- 129 130//--シェイプが減る---------- 131 "remove":{ 132 "particles_nb":2 //減るシェイプの数 133 } 134//-------------------- 135 136 } 137 }, 138 "retina_detect":true, //Retina Displayを対応するか否か 139 "resize":true //canvasのサイズ変更にわせて拡大縮小するか否か 140 141 142 143 } 144); 145 146 147}); 148
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。