Color of particles change on different sections-CodePudding

Hii please checkout this code pen


<div id="particles-js-1"></div>

<div  >One</div>
<div  >Two</div>
<div  >Three</div>
<div  >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.

CodePudding user response：

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:

move your particle init/reset code into a function
call that function each time your background changes

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 >One</div>
<div >Two</div>
<div >Three</div>
<div >Four</div>

<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

CodePudding user response：

remove in .section class:

border-top: 1px solid red;