みなさんこんにちは！Ryoです
今回はBubbleで幾何学アニメーションを作る！という名目で「Particles.js」というプラグインを紹介していきます！
少々使い所に困るプラグインではありますが、子供ウケが狙えたり気づいたら自分自身が無心になって遊んでいたりとなかなか遊び心満載のプラグインになっています！
では、早速実装していきましょう！
Particles.js
それでは、早速実装していきましょう！
と言いたいところですが、「そもそもParticles.jsって何ができるんだよ！」という声がたくさん聞こえるのでParticles.jsってなんなのかを少し説明しましょう！
Particles.jsとは上の動画のような幾何学的なアニメーションを構築するためのプラグインです。
http://vincentgarreau.com/particles.js/
こちらがParticles.jsのソースコードになっているので、YesCodeの場合はこちらを使って実装させる感じです。
プラグイン実装編
PluginタブのAdd Pluginsより、[particles.js]で検索し、Particles.jsをインストールします。
こちらでParticles.jsの下準備は完了です。
ID Attributes 設定
Particles.jsを使って幾何学アニメーションを実装させるためには、BubbleのID Attribute設定をONにしておく必要があります。
ID Attribute設定をONにするには、エディタのSettingsタブからGeneralの[Expose the option to add an ID attribute to HTML elements]にチェックをつけておきます。
これでID Attribute設定は完了です。
Design設定
それではParticles.jsを導入していきましょう！
DesignタブにてGroupを配置し、Background styleをFlat colorに設定して、色を変えておきます。
Particles.jsプラグインの初期設定の色が#FFFFFF(白)のため、暗めの色に設定しておくとこのあと楽です！
次にGroupのID Attributeに[particles-js]と設定しておきましょう。
その後、設置したGroup内にParticlesプラグインを設置します。
ParticlesプラグインのID Attributeには何も設定しなくて大丈夫です。
これで幾何学アニメーションの設定は完了です！
早速プレビューでみてみましょう！
こんな感じのアニメーションが作れていたら成功です！
うまくいかなかった場合は今までのフェーズを見直してみてください。
カスタマイズすればこんな感じになるのでぜひ色々試してみてください！
あとがき
今回のParticles.jsプラグインはいかがだったでしょうか。
このような.jsがつくプラグインはBubbleにも本当に多く存在するので、今後も紹介していきます！
もしこんなプラグイン触って欲しいなどありましたらぜひともコメントいただけると嬉しいです！
