不同截面的粒子颜色变化

Question

您好，请查看此码笔


<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

我在这里所做的是- 创建了几个部分，在滚动时，颜色更改 body。我还包括了粒子 js。我想要的是 - 当 body 颜色改变时，粒子也应该改变颜色。

有什么方法可以实现这个，请帮助我。

Answer 1

在 .section 中删除 class:

border-top: 1px solid red;

Answer 2

注意：看起来你不能只改变颜色而不重置整个particle-field。 This answer points to this github issue

话虽如此，您可以：

将你的粒子 init/reset 代码移动到一个函数中
每次背景改变时调用该函数

以下摘自您的 codepen 的代码段使用了之前的 background-colour。您可以轻松地向每个部分添加一个 data-particle-colour 属性并阅读它。

关键是当背景颜色改变时只有 change/reset 粒子，否则它会在每次滚动事件时重置。

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>

不同截面的粒子颜色变化

Color of particles change on different sections

javascript

css

jquery

particles

particles.js