しゃぼん玉のような丸がふわふわ飛ぶアニメーションを作りたくて、実際に使用したJSライブラリを紹介します。上のGIFは実際に私が作ったものです。
どんなアニメーションが作れるのか
こちらにデモが載っているので、ぜひ見てみてください。
React Particles-JS - Demo
インストール方法
# npm の場合
npm install react-particles-js
# yarn の場合
yarn add react-particles-js
あとはインポートして、微調整
基本は以下の形です。
import React from 'react';
import Particles from 'react-particles-js';
export default function Screen() {
return (
<Particles/>
)
}
あとは、Propsなどを自分好みに調整します。Propsについての詳細はこちらで説明されています。
参考までに、以下は私が微調整したものは以下です。
import React from 'react';
import Particles from 'react-particles-js';
export default function HeroParticles() {
return (
<div id="hero">
<Particles
params={{
"particles": {
"number": {
"value": 50,
"density": {
"enable": false
}
},
"size": {
"value": 50,
"random": true,
"anim": {
"speed": 4,
"size_min": 0.3
}
},
"line_linked": {
"enable": false
},
"move": {
"random": true,
"speed": 1,
"direction": "top",
"out_mode": "out"
}
},
"interactivity": {
"events": {
"onhover": {
"enable": true,
"mode": "bubble"
},
"onclick": {
"enable": true,
"mode": "repulse"
}
},
"modes": {
"bubble": {
"distance": 250,
"duration": 2,
"size": 0,
"opacity": 0
},
"repulse": {
"distance": 400,
"duration": 4
}
}
}
}}
/>
<div className="hero_message">
<h1>Particles</h1>
</div>
</div>
);
}