So you're a beginner in web development like me. And many times when you visit some websites that have amazing moving backgrounds, you become curious to know, how they implement it.
Else like me "they must be genius" :)
So today I'm going to show you the process of how to implements Moving Particles Background in your own website or how to create an eye-catching portfolio website using TypeScript library called tsParticles.
How to install tsParticles component
Open your terminal and go to location of your ReactJS project. And type following command.
npm install react-tsparticles
or
yarn add react-tsparticles
This will install a ReactJS component in your project.
If you're starting with a brand-new project than you can simply type this command and it will install this component with the create-react-app. Put name of your project in the place of "your_app"
create-react-app your_app --template particles
How to use
Now you have to import it in your component where you want to implement it. You can also make a separate component for tsparticles and import it on top like this
import Particles from "react-tsparticles";
After importing it in your component, you can use the <Particles /> in your code.
Now You have to pass props to this component to make this background effect work and you can also change and play around with properties to experiments with different effects
<Particles
id="tsparticles"
options={{
background: {
color: {
value: "#0d47a1",
},
},
fpsLimit: 60,
interactivity: {
detectsOn: "canvas",
events: {
onClick: {
enable: true,
mode: "push",
},
onHover: {
enable: true,
mode: "repulse",
},
resize: true,
},
modes: {
bubble: {
distance: 400,
duration: 2,
opacity: 0.8,
size: 40,
},
push: {
quantity: 4,
},
repulse: {
distance: 200,
duration: 0.4,
},
},
},
particles: {
color: {
value: "#ffffff",
},
links: {
color: "#ffffff",
distance: 150,
enable: true,
opacity: 0.5,
width: 1,
},
collisions: {
enable: true,
},
move: {
direction: "none",
enable: true,
outMode: "bounce",
random: false,
speed: 6,
straight: false,
},
number: {
density: {
enable: true,
value_area: 800,
},
value: 80,
},
opacity: {
value: 0.5,
},
shape: {
type: "circle",
},
size: {
random: true,
value: 5,
},
},
detectRetina: true,
}}
/>
Now you have to render <Particles /> component and you will see magical effects. I'm sure, it will bring smile on your face :)
You can check this Official tsParticles ReactJS GitHub repository for more details explanation
Thank you for reading this post, I hope it helps you.
This is my first ever post so feedbacks and suggestions are welcome!
Top comments (2)
Very good article Thanks to the author.
I think you have another choice github.com/lindelof/particles-bg
There are dozens of different particle animations, more cool and easy to use
Thank you @lindelof
Looking awesome! Surely I will check it out