如何让对象发出粒子 [JS]

问题描述

我目前正在制作一个叠加层，我想让它从顶部发射粒子，这些粒子随着时间的推移或长度变得越来越不可见。遗憾的是，我发现的关于 JS 粒子的唯一信息是如何制作带有粒子的背景。我使用 alpha 0 作为颜色制作这样的背景并将其移动到覆盖层后面，但该解决方案并不是很干净。另外关于这一点，形状是一个倾斜的矩形，其中一个矩形角下的粒子容器部分仍然可见，这看起来很糟糕。有没有办法做得更好？除此之外，我不知道如何让它们持续失去可见性，直到它们在一段距离或一段时间后消失，但我认为这是一个相对简单的问题。

我希望你能帮助我，保持安全，度过美好的一天^^

代码：

HTML：


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

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

<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>

CSS：

canvas{ display: block; vertical-align: bottom; }

#particles-js {
position:absolute;
width: 560px;
height: 110px;
background-color: rgba(0,0);
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
top: 135px;
left: 200px;
}

.count-particles {
background: #000022;
position: absolute;
top: 48px;
left: 0;
width: 80px;
color: #13E8E9;
font-size: .8em;
text-align: left;
text-indent: 4px;
line-height: 14px;
padding-bottom: 2px;
font-family: Helvetica,Arial,sans-serif;
font-weight: bold;
}
.js-count-particles {
font-size: 1.1em;
}
#stats,.count-particles {
-webkit-user-select: none;
margin-top: 5px;
margin-left: 5px;
}
#stats {
border-radius:
3px 3px 0 0;
overflow: hidden;
}
.count-particles{ border-radius: 0 0 3px 3px; }

#TopPart {
  position: relative;
  height: 55px;
  background-color: #00ee97;
  transform: skew(-45deg,0deg);
  width: 500px;
  margin-left: 27.5px;
  border-top: 3px solid black;
  border-right: 5px solid black;
  border-left: 5px solid black;
  Box-shadow: 5px 5px 5px rgba(0,0.4);
  z-index: 1;
  top: 200px;
  left: 200px;
}

JS：

"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,"speed":40,"size_min":0.1,"line_linked":{"enable":false,"distance":150,"color":"#ffffff","opacity":0.4,"width":5},"move":{"enable":true,"speed":2,"direction":"top","straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":false,"mode":"repulse"},"onclick":{"enable":false,"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,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});
var count_particles,stats,update; stats = new Stats; stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement); count_particles = document.querySelector('.js-count-particles');
update = function() { stats.begin();
stats.end();
if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array)
{ count_particles.innerText = window.pJSDom[0].pJS.particles.array.length; }
requestAnimationFrame(update);
};
requestAnimationFrame(update);;

https://codepen.io/spielefresser/pen/poeXWJq

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript particles particles.js