原生JS+CSS+HTML做出particles.js的默认效果

马黑黑

马黑黑

代码

1. <style>
   
2. #mama {
   
3.         width: 1000px;
   
4.         height: 600px;
   
5.         background: linear-gradient(to top right,darkgreen,antiquewhite);
   
6.         opacity: .95;
   
7.         overflow: hidden;
   
8.         position: relative;
   
9.         margin: 0 0 0 calc(50% - 581px);
   
10. }
    
11. li-zi {
    
12.         display: block;
    
13.         position: absolute;
    
14.         width: 10px;
    
15.         height: 10px;
    
16.         background: snow;
    
17.         border-radius: 50%;
    
18. }
    
19. </style>
    
20. 
    
21. <div id="mama"></div>
    
22. 
    
23. <script>
    
24. let total = 50, canMove = true, lzAr = [];
    
25. let mlAr = Array.from({length: total}, (v) => Math.random() * 1.5 - .8),
    
26.         mtAr = Array.from({length: total}, (v) => Math.random() * 1.2 - .6);
    
27. 
    
28.         Array.from({length: total}).forEach((item,key) => {
    
29.                 item = document.createElement('li-zi');
    
30.                 let ww = 4 + Math.round(Math.random() * 10),
    
31.                         lPos = Math.round(Math.random() * (mama.offsetWidth - ww)),
    
32.                         tPos = Math.round(Math.random() * (mama.offsetHeight - ww));
    
33.                 item.style.cssText += `
    
34.                         left: ${lPos}px;
    
35.                         top: ${tPos}px;
    
36.                         width: ${ww}px;
    
37.                         height: ${ww}px;
    
38.                         background: #${Math.random().toString(16).substr(-6)};
    
39.                 `;
    
40.                 let ar = [item,lPos,tPos,ww];
    
41.                 lzAr.push(ar);
    
42.                 mama.appendChild(item);
    
43.         });
    
44. 
    
45.         let move = () => {
    
46.                 if(canMove) {
    
47.                         lzAr.forEach((item,key) => {
    
48.                                 item[1] += mlAr[key];
    
49.                                 item[2] += mtAr[key];
    
50.                                 if(item[1] > mama.offsetWidth) item[1] = 0;
    
51.                                 if(item[1] < -item[3] / 2) item[1] = mama.offsetWidth;
    
52.                                 if(item[2] > mama.offsetHeight) item[2] = 0;
    
53.                                 if(item[2] < -item[3] / 2) item[2] = mama.offsetHeight;
    
54.                                 item[0].style.left = item[1] + 'px';
    
55.                                 item[0].style.top = item[2] + 'px';
    
56.                         });
    
57.                 }
    
58.                 requestAnimationFrame(move);
    
59.         };
    
60. 
    
61.         move();
    
62. 
    
63. </script>

复制代码

马黑黑

粒子大小范围依赖第 30 行，

let ww = 4 + Math.round(Math.random() * 10),

数字 4 是最小尺寸，数字 10 是加的最大尺寸，即大小区间为 4 - 14，修改这两个数字可改变粒子的大小范围。

马黑黑

粒子的颜色在第 38 行，

background: #${Math.random().toString(16).substr(-6)};

这是16进制随机颜色，可以修改为别的。例如，希望粒子都是白色的：

background: #fff;

马黑黑

粒子的数量在第 24 行，

let total = 50, canMove = true, lzAr = [];

50 个粒子，把 50 改为多少就是多少，不要太小气也不要太贪心

马黑黑

粒子的运行方向与速度是随机的，由 25 和 26 行分别控制 xy 方向，

let mlAr = Array.from({length: total}, (v) => Math.random() * 1.5 - .8),
        mtAr = Array.from({length: total}, (v) => Math.random() * 1.2 - .6);

试着修改区间范围，应该会发现，既可以控制方向、也可以控制速度。

马黑黑

本帖，是利用二维数组来存储数据，数据有些是动态变化的，然后由这些变化去驱动粒子的 left 和 top 值，达到移动的目的。

数组处理数字没有问题，问题是程序代码不容易看懂，所以，我会考虑使用 JS 的 class（类）来重写一个相同功能的脚本。

小辣椒

黑黑说的这么仔细，这年低评优秀教授一定得你

梦缘

问好老师，欣赏精彩佳作，点赞！

一斛珠

给黑黑老师点赞问好。

南无月

马黑黑 发表于 2023-7-4 12:42
粒子的数量在第 24 行，

let total = 50, canMove = true, lzAr = [];

要我试估计就先来200个看看

路人甲

满天的彩色泡泡飞

梦江南

问好老师，谢谢无私分享！

樵歌

好漂亮 的粒子，瞅瞅你哪位高足先应用

马黑黑

醉美水芙蓉 发表于 2023-7-4 20:16
欣赏学习黑黑老师的教程！

马黑黑

樵歌 发表于 2023-7-4 18:01
好漂亮 的粒子，瞅瞅你哪位高足先应用

我这里是半成品，控制粒子功能没给出，看看谁会

马黑黑

梦江南 发表于 2023-7-4 17:15
问好老师，谢谢无私分享！

马黑黑

路人甲 发表于 2023-7-4 16:20
满天的彩色泡泡飞

感谢光临指导

马黑黑

南无月 发表于 2023-7-4 16:13
要我试估计就先来200个看看

少了，一般250是没问题的