質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

0回答

1337閲覧

particles-jsを使ってアニメーションを実装したい

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2020/03/21 09:52

編集2022/01/12 10:55

html

1<div id="particles-js"></div> 2 3 <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <!-- stats.js lib --> 4 <script src="http://threejs.org/examples/js/libs/stats.min.js"></script>

css

1 2 3 #particles-js { 4 width: 100%; 5 height: 100%; 6 display: block; 7 position: absolute; 8 top: 0; 9 left: 0; 10 right: 0; 11 bottom: 0; 12 } 13

js

1 particlesJS("particles-js", { 2 "particles": { 3 "number": { 4 "value": 80, 5 "density": { 6 "enable": true, 7 "value_area": 800 8 } 9 }, 10 "color": { 11 "value": "#ffffff" 12 }, 13 "shape": { 14 "type": "circle", 15 "stroke": { 16 "width": 0, 17 "color": "#000000" 18 }, 19 "polygon": { 20 "nb_sides": 5 21 }, 22 "image": { 23 "src": "img/github.svg", 24 "width": 100, 25 "height": 100 26 } 27 }, 28 "opacity": { 29 "value": 0.5, 30 "random": false, 31 "anim": { 32 "enable": false, 33 "speed": 1, 34 "opacity_min": 0.1, 35 "sync": false 36 } 37 }, 38 "size": { 39 "value": 3, 40 "random": true, 41 "anim": { 42 "enable": false, 43 "speed": 40, 44 "size_min": 0.1, 45 "sync": false 46 } 47 }, 48 "line_linked": { 49 "enable": true, 50 "distance": 150, 51 "color": "#ffffff", 52 "opacity": 0.4, 53 "width": 1 54 }, 55 "move": { 56 "enable": true, 57 "speed": 6, 58 "direction": "none", 59 "random": false, 60 "straight": false, 61 "out_mode": "out", 62 "bounce": false, 63 "attract": { 64 "enable": false, 65 "rotateX": 600, 66 "rotateY": 1200 67 } 68 } 69 }, 70 "interactivity": { 71 "detect_on": "canvas", 72 "events": { 73 "onhover": { 74 "enable": true, 75 "mode": "repulse" 76 }, 77 "onclick": { 78 "enable": true, 79 "mode": "push" 80 }, 81 "resize": true 82 }, 83 "modes": { 84 "grab": { 85 "distance": 400, 86 "line_linked": { 87 "opacity": 1 88 } 89 }, 90 "bubble": { 91 "distance": 400, 92 "size": 40, 93 "duration": 2, 94 "opacity": 8, 95 "speed": 3 96 }, 97 "repulse": { 98 "distance": 200, 99 "duration": 0.4 100 }, 101 "push": { 102 "particles_nb": 4 103 }, 104 "remove": { 105 "particles_nb": 2 106 } 107 } 108 }, 109 "retina_detect": true 110 }); 111 var count_particles, stats, update; 112 stats = new Stats; 113 stats.setMode(0); 114 stats.domElement.style.position = 'absolute'; 115 stats.domElement.style.left = '0px'; 116 stats.domElement.style.top = '0px'; 117 document.body.appendChild(stats.domElement); 118 count_particles = document.querySelector('.js-count-particles'); 119 update = function() { 120 stats.begin(); 121 stats.end(); 122 if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) { 123 count_particles.innerText = window.pJSDom[0].pJS.particles.array.length; 124 } 125 requestAnimationFrame(update); 126 }; 127 requestAnimationFrame(update);; 128

添付した動画の様な動きを疾走したいのですが、同じ様にはいかずどこをどう変えれば同じ様に動くのかわからなくなってしまったので、教えていただきたいです。
ご回答いただければと思います。
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

AkitoshiManabe

2020/03/21 11:17

タイトルの文言は「particles.js」を含めた別の内容に変え、参考にした法人サイトを強調しないほうがいいと思います。(「盗作したい」と)誤解されかねません。ちなみに「particles.js」は使ったことがありませんが、検索すると、使い方を示されているブログエントリもヒットするみたいですね。
m.ts10806

2020/03/21 11:48

同じような質問立てられてますが、あまりよろしくないかと。 そういう意図はないにしても、広告や宣伝の類に捉えられます。
退会済みユーザー

退会済みユーザー

2020/03/21 21:44

わかりました。 他の言葉で再度質問させていただきたいと思います。
m.ts10806

2020/03/21 21:50

質問編集すれば良いのでは。
退会済みユーザー

退会済みユーザー

2020/03/21 22:10

ただいま質問編集させていただきました。 ご回答していただければありがたいです。 よっろしくお願いいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問