论坛 › 马黑黑教程专版 › 原生JS+CSS+HTML做出particles.js的默认效果

马黑黑 发表于 2023-7-4 12:33

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

<style>
#mama {
        width: 1000px;
        height: 600px;
        background: linear-gradient(to top right,darkgreen,antiquewhite);
        opacity: .95;
        overflow: hidden;
        position: relative;
        margin: 0 0 0 calc(50% - 581px);
}
li-zi {
        display: block;
        position: absolute;
        width: 10px;
        height: 10px;
        background: snow;
        border-radius: 50%;
}
</style>

<div id="mama"></div>

<script>
let total = 50, canMove = true, lzAr = [];
let mlAr = Array.from({length: total}, (v) => Math.random() * 1.5 - .8),
        mtAr = Array.from({length: total}, (v) => Math.random() * 1.2 - .6);

        Array.from({length: total}).forEach((item,key) => {
                item = document.createElement('li-zi');
                let ww = 4 + Math.round(Math.random() * 10),
                        lPos = Math.round(Math.random() * (mama.offsetWidth - ww)),
                        tPos = Math.round(Math.random() * (mama.offsetHeight - ww));
                item.style.cssText += `
                        left: ${lPos}px;
                        top: ${tPos}px;
                        width: ${ww}px;
                        height: ${ww}px;
                        background: #${Math.random().toString(16).substr(-6)};
                `;
                let ar = ;
                lzAr.push(ar);
                mama.appendChild(item);
        });

        let move = () => {
                if(canMove) {
                        lzAr.forEach((item,key) => {
                                item += mlAr;
                                item += mtAr;
                                if(item > mama.offsetWidth) item = 0;
                                if(item < -item / 2) item = mama.offsetWidth;
                                if(item > mama.offsetHeight) item = 0;
                                if(item < -item / 2) item = mama.offsetHeight;
                                item.style.left = item + 'px';
                                item.style.top = item + 'px';
                        });
                }
                requestAnimationFrame(move);
        };

        move();

</script>

马黑黑 发表于 2023-7-4 12:35

代码
<style>
#mama {
        width: 1000px;
        height: 600px;
        background: linear-gradient(to top right,darkgreen,antiquewhite);
        opacity: .95;
        overflow: hidden;
        position: relative;
        margin: 0 0 0 calc(50% - 581px);
}
li-zi {
        display: block;
        position: absolute;
        width: 10px;
        height: 10px;
        background: snow;
        border-radius: 50%;
}
</style>

<div id="mama"></div>

<script>
let total = 50, canMove = true, lzAr = [];
let mlAr = Array.from({length: total}, (v) => Math.random() * 1.5 - .8),
        mtAr = Array.from({length: total}, (v) => Math.random() * 1.2 - .6);

        Array.from({length: total}).forEach((item,key) => {
                item = document.createElement('li-zi');
                let ww = 4 + Math.round(Math.random() * 10),
                        lPos = Math.round(Math.random() * (mama.offsetWidth - ww)),
                        tPos = Math.round(Math.random() * (mama.offsetHeight - ww));
                item.style.cssText += `
                        left: ${lPos}px;
                        top: ${tPos}px;
                        width: ${ww}px;
                        height: ${ww}px;
                        background: #${Math.random().toString(16).substr(-6)};
                `;
                let ar = ;
                lzAr.push(ar);
                mama.appendChild(item);
        });

        let move = () => {
                if(canMove) {
                        lzAr.forEach((item,key) => {
                                item += mlAr;
                                item += mtAr;
                                if(item > mama.offsetWidth) item = 0;
                                if(item < -item / 2) item = mama.offsetWidth;
                                if(item > mama.offsetHeight) item = 0;
                                if(item < -item / 2) item = mama.offsetHeight;
                                item.style.left = item + 'px';
                                item.style.top = item + 'px';
                        });
                }
                requestAnimationFrame(move);
        };

        move();

</script>

马黑黑 发表于 2023-7-4 12:38

本帖最后由 马黑黑 于 2023-7-4 13:20 编辑

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

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

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

马黑黑 发表于 2023-7-4 12:40

粒子的颜色在第 38 行，

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

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

background: #fff;

马黑黑 发表于 2023-7-4 12:42

粒子的数量在第 24 行，

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

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

马黑黑 发表于 2023-7-4 12:46

粒子的运行方向与速度是随机的，由 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);

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

马黑黑 发表于 2023-7-4 12:50

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

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

小辣椒 发表于 2023-7-4 14:07

黑黑说的这么仔细，这年低评优秀教授一定得你{:4_187:}

梦缘 发表于 2023-7-4 15:38

问好老师，欣赏精彩佳作，点赞！{:4_187:}

一斛珠 发表于 2023-7-4 16:05

给黑黑老师点赞问好。

南无月 发表于 2023-7-4 16:13

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

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


{:4_170:}要我试估计就先来200个看看

路人甲 发表于 2023-7-4 16:20

满天的彩色泡泡飞

梦江南 发表于 2023-7-4 17:15

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

樵歌 发表于 2023-7-4 18:01

好漂亮 的粒子，瞅瞅你哪位高足先应用{:4_176:}

醉美水芙蓉 发表于 2023-7-4 20:16

马黑黑 发表于 2023-7-4 22:23

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

{:4_190:}

马黑黑 发表于 2023-7-4 22:23

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

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

马黑黑 发表于 2023-7-4 22:24

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

{:4_190:}

马黑黑 发表于 2023-7-4 22:24

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

感谢光临指导

马黑黑 发表于 2023-7-4 22:24

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

少了，一般250是没问题的

查看完整版本: 原生JS+CSS+HTML做出particles.js的默认效果