Hii please checkout this code pen
<div id="particles-js-1"></div>
<div class="one section section-1" >One</div>
<div class="two section section-2" >Two</div>
<div class="three section section-3" >Three</div>
<div class="four section section-4" >Four</div>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
transition: background 0.5s ease-in-out;
}
#particles-js-1 {
position: fixed;
width: 100%;
height: 100%;
/* background-color: #15aabf;
background-image: url(""); */
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
.section {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
color: #fff;
font-family: sans-serif;
font-size: 72px;
font-weight: 600;
text-transform: uppercase;
}
</style>
<script>
document.querySelector('.one').setAttribute('data-bg','#082c4c');
document.querySelector('.two').setAttribute('data-bg','#f03856');
document.querySelector('.three').setAttribute('data-bg','#f1f5f7');
document.querySelector('.four').setAttribute('data-bg','#25b5e9');
window.sections = [...document.querySelectorAll('.section')];
window.lastScrollTop = window.pageYOffset;
document.body.style.background = window.sections[0].getAttribute('data-bg');
window.addEventListener('scroll', onScroll);
function onScroll() {
const scrollTop = window.pageYOffset;
const section = window.sections
.map(section => {
const el = section;
const rect = el.getBoundingClientRect();
return {el, rect};
})
.find(section => section.rect.bottom >= (window.innerHeight * 0.5));
document.body.style.background = section.el.getAttribute('data-bg');
}
particlesJS("particles-js-1", {
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"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": 3,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.5,
"width": 1
},
"move": {
"enable": true,
"speed": 1,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "bubble"
},
"onclick": {
"enable": false,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 200,
"size": 4,
"duration": 2,
"opacity": 0.2,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
});
</script>
https://codepen.io/tarunpatnayak/pen/VwrmQOq
What I did here is- Created few section, when on scroll, changes color of body. I have also included particle js. What I want is - The particles should also change colors when the body colors changes.
Is there a way I can Achive this, Please help me.
Note: it doesn't look like you can change just the colour without resetting the whole particle-field. This answer points to this github issue
Having said that, you can:
The snippet below, taken from your codepen, uses the previous background-colour. You could just as easily add a data-particle-colour attribute to each section and read that.
The key is to only change/reset the particles when the background colour changes, otherwise it resets on every scroll event.
document.querySelector(".one").setAttribute("data-bg", "#082c4c");
document.querySelector(".two").setAttribute("data-bg", "#f03856");
document.querySelector(".three").setAttribute("data-bg", "#f1f5f7");
document.querySelector(".four").setAttribute("data-bg", "#25b5e9");
window.sections = [...document.querySelectorAll(".section")];
window.lastScrollTop = window.pageYOffset;
document.body.style.background = window.sections[0].getAttribute("data-bg");
window.addEventListener("scroll", onScroll);
var lastbg = "#FFFFFF";
function onScroll() {
const scrollTop = window.pageYOffset;
const section = window.sections
.map((section) => {
const el = section;
const rect = el.getBoundingClientRect();
return {
el,
rect
};
})
.find((section) => section.rect.bottom >= window.innerHeight * 0.5);
var thisbg = section.el.getAttribute("data-bg");
document.body.style.background = thisbg;
if (thisbg != lastbg) {
setParticles(lastbg);
lastbg = thisbg;
}
}
function setParticles(color) {
particlesJS("particles-js-1", {
particles: {
number: {
value: 80,
density: {
enable: true,
value_area: 800
}
},
color: {
value: color
},
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: 3,
random: true,
anim: {
enable: false,
speed: 40,
size_min: 0.1,
sync: false
}
},
line_linked: {
enable: true,
distance: 150,
color: color,
opacity: 0.5,
width: 1
},
move: {
enable: true,
speed: 1,
direction: "none",
random: false,
straight: false,
out_mode: "out",
bounce: false,
attract: {
enable: false,
rotateX: 600,
rotateY: 1200
}
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: true,
mode: "bubble"
},
onclick: {
enable: false,
mode: "push"
},
resize: true
},
modes: {
grab: {
distance: 400,
line_linked: {
opacity: 1
}
},
bubble: {
distance: 200,
size: 4,
duration: 2,
opacity: 0.2,
speed: 3
},
repulse: {
distance: 200,
duration: 0.4
},
push: {
particles_nb: 4
},
remove: {
particles_nb: 2
}
}
},
retina_detect: true
});
}
setParticles("#FFFFFF");* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
transition: background 0.5s ease-in-out;
}
#particles-js-1 {
position: fixed;
width: 100%;
height: 100%;
/* background-color: #15aabf;
background-image: url(""); */
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
.section {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
color: #fff;
font-family: sans-serif;
font-size: 72px;
font-weight: 600;
text-transform: uppercase;
}<div id="particles-js-1"></div>
<div class="one section section-1">One</div>
<div class="two section section-2">Two</div>
<div class="three section section-3">Three</div>
<div class="four section section-4">Four</div>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>