使用 Particles.js 实现网页粒子动态背景

最新推荐文章于 2024-09-13 22:06:04 发布

liulanba

最新推荐文章于 2024-09-13 22:06:04 发布

阅读量3.2k

点赞数

分类专栏： JavaScript 文章标签： javascript html css

本文链接：https://blog.csdn.net/liulanba/article/details/130882799

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章展示了如何创建一个使用Particles.js库的HTML页面，该页面具有粒子动画背景。主要内容包括HTML结构、CSS样式和JavaScript代码，用于配置粒子的大小、颜色、速度和交互效果。读者可以通过调整特定参数来自定义粒子效果。

摘要由CSDN通过智能技术生成

创建三个文件：
index.hhtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Particles.js Background</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="particles-js"></div>

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

style.css

body {
    margin: 0;
    overflow: hidden;
}

#particles-js {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    background-color: black;
}

script.js

document.addEventListener("DOMContentLoaded", function() {
    // 配置 Particles.js
    particlesJS("particles-js", {
        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
                }
            },
            opacity: {
                value: 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.8,
                width: 2
            },
            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: "grab"
                },
                onclick: {
                    enable: true,
                    mode: "push"
                },
                resize: true
            },
            modes: {
                grab: {
                    distance: 140,
                    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
    });
});

双击index.html即可在浏览器打开，效果图如下：
如果你需要进行自定义修改，下面几个修改点你可能感兴趣：
1.粒子移动速度
修改move.speed 参数,该参数控制粒子的移动速度，数值越大，移动速度越快，数值越小，移动速度越慢。

move: {
    enable: true,
    speed: 6,
    direction: "none",
    random: false,
    straight: false,
    out_mode: "out",
    bounce: false,
    attract: {
        enable: false,
        rotateX: 600,
        rotateY: 1200
    }
}

2.点的亮度和大小：

size.value: 控制粒子的大小，默认值为 3，数值越大，粒子越大。
color.value: 控制粒子的颜色，默认为白色。你可以设置为十六进制颜色值，例如 “#ff0000” 表示红色。
opacity.value: 控制粒子的透明度，默认值为 1，数值范围从 0 到 1，数值越大，粒子越不透明。

3.线条的亮度和大小：
line_linked.opacity: 控制线条的透明度，默认值为 0.4，数值范围从 0 到 1，数值越大，线条越不透明。
line_linked.width: 控制线条的宽度，默认值为 1，数值越大，线条越粗。