A full customization of particlejs
Updated on
...
16th February 2023
In this tutorial, we are going to Create awesome background effects with particles.js
Particles.js:
Particles.js is a lightweight, dependency-free, and responsive javascript plugin for particles background.
That means we can use it with bootstrap 4 or bootstrap 3 or without any UI framework just after writing some CSS and js. in this tutorial we are going to use bootstrap 4
Firstly we need particle.js plugin we can download it from Github or use any live CDN. In this tutorial, we will use downloadable particlejs.
Create index.html
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<!-- <script src="static/js/jquery.min.js"></script> -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<section class="banner" id="particles-js">
<div class="container-fluid ">
<div class="row">
<div class="col-12 p-0">
</div>
</div>
</div>
</section>
<script src="js/particles.js"></script>
Then we need some custom styling to form the background image
style.css
html{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body{
font:normal 75% Arial, Helvetica, sans-serif;
}
canvas{
position: absolute;
top: 0px;
left: 0;
right: 0;
bottom: 0px;
height: 100%
}
.banner{
background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
url('https://picsum.photos/id/1025/1920/900');
background-position: top;
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
}
.banner .row{
min-height: 500px;
}
/* ---- particles.js container ---- */
#particles-js{
position: relative;
width: 100%;
height: 100%;
}
app.js setting for single color
particlesJS('particles-js',
{
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 700
}
},
"color": {
"value": ["#fde5b9"]
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 10,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.2,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#fde5b9",
"opacity": 0.95,
"width": 2
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true,
"config_demo": {
"hide_card": false,
"background_color": "#b61924",
"background_image": "",
"background_position": "50% 50%",
"background_repeat": "no-repeat",
"background_size": "cover"
}
}
);
app.js setting for multi-color
particlesJS('particles-js',
{
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 700
}
},
"color": {
"value": ["#fde5b9","#f005b9","#fde009","#fde509"]
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 10,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.2,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#fde5b9",
"opacity": 0.95,
"width": 2
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true,
"config_demo": {
"hide_card": false,
"background_color": "#b61924",
"background_image": "",
"background_position": "50% 50%",
"background_repeat": "no-repeat",
"background_size": "cover"
}
}
);
