こんにちは、元調剤薬局の薬剤師、今は福井県福井市でホームページ制作をやっている@ジョウです。
今回の記事は、particles.jsというプラグイン。備忘録として、簡単に使い方をまとめてみました。
particles.jsとは？
このプラグインは、薬学部の有機化学の授業で見たような、高分子のアニメーションを作ることができます。マウスをホバーすると、分子が反発したり、近づいてきたりといった実装をすることも可能です。
このアニメーションを実装しているサイトをたまに見かけるので、今回作り方を調べました。このYouTubeがとても参考になります。英語ですが、わかりやすいのでおすすめです。
公式サイトはこちら。
HTMLの書き方
HTMLは以下。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Particles Login</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="particles-js"> <div > 好きなコンテンツ </div> </div> <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <script> particlesJS.load('particles-js', 'particles.json', function(){ console.log('particles.json loaded...'); }); </script> </body> </html> |
</body>の直前で、particles.min.jsを読み込むこと。
そして、このプラグインは、jsonファイルでオプションを設定していくので、そのファイルも読み込む必要もあります。
jsonファイルの書き方
jsonファイルで設定するオプションは、このGithubを参考にしてください。細かな値が書いてあります。
keyの項目に、『particles.number.value』、option typeの項目の『number』と書いてある場合は、
|
1 2 3 4 5 6 7 |
{ "particles": { "number": { "value": 200 } } } |
という感じで書いていきます。
オプションの主な内容は以下の通り。
particleのオプション
- number:分子の数
- color:分子の色
- shape:分子の形
- opacity:透明度
- size:大きさ
- line_linked:分子同士のつながり
- move:動き
interactivityのオプション。
- events:ホバーやクリックしたときの動き
- modes:eventsの設定ごとの追加オプション指定
それぞれの値を設定していくと以下のような感じになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
{ "particles": { "number": { "//": "分子の数", "value": 200 }, "color": { "//": "分子の色", "value": "#ffffff" }, "shape": { "//": "分子の形", "type": "circle", "//": "分子の輪郭", "stroke": { "//": "輪郭の太さ", "width": 1, "//": "輪郭の色", "color": "#ccc" } }, "opacity": { "value": 0.5, "//": "透明度をrandomに", "random": true, "//": "透明度をのアニメーション", "anim": { "enable": true, "speed": 1 } }, "size": { "value": 5, "//": "1-5の間で大きさをrandomに", "random": true, "anim": { "enable": true, "speed": 20 } }, "line_linked": { "//": "分子同士のつながり", "enable": true, "distance": 200, "color": "#fff", "width": 1.5 }, "move": { "//": "分子の動き、falseにすると止まる", "enable": true, "speed": 2, "direction": "top-right", "straight": false } }, "interactivity": { "events": { "//": "ホバーやクリックしたときの動き", "onhover": { "enable": true, "//": "反発", "mode": "repulse" }, "onclick": { "enable": true, "//": "デフォルトはpush(追加)", "mode": "remove" } }, "modes": { "//": "interactivityのmode:repulseのオプション指定", "repulse": { "//": "反発距離", "distance": 50, "duration": 0.4 }, "//": "interactivityのmode:bubbleにした時のオプション指定", "bubble":{ "distance":100, "size":10 } } } } |
以上になります。