particles 吸附粒子效果

1、配置

{
    "particles": {
        "number": {
            "value": 100,
            "density": {
                "enable": true,
                "value_area": 800
            }
        },
        "color": {
            "value": "#000000"
        },
        "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": 1,
            "random": false,
            "anim": {
                "enable": false,
                "speed": 40,
                "size_min": 0.1,
                "sync": false
            }
        },
        "line_linked": {
            "enable": true,
            "distance": 120,
            "color": "#000000",
            "opacity": 0.4,
            "width": 1
        },
        "move": {
            "enable": true,
            "speed": 2,
            "direction": "none",
            "random": false,
            "straight": false,
            "out_mode": "bounce",
            "attract": {
                "enable": false,
                "rotateX": 500,
                "rotateY": 500
            }
        }
    },
    "interactivity": {
        "detect_on": "canvas",
        "events": {
            "onhover": {
                "enable": true,
                "mode": "grab"
            },
            "onclick": {
                "enable": false
            },
            "resize": true
        },
        "modes": {
            "grab": {
                "distance": 120,
                "line_linked": {
                    "opacity": 0.75
                }
            },
            "bubble": {
                "distance": 400,
                "size": 40,
                "duration": 2,
                "opacity": 8,
                "speed": 3
            },
            "repulse": {
                "distance": 200
            },
            "push": {
                "particles_nb": 4
            },
            "remove": {
                "particles_nb": 2
            }
        }
    },
    "retina_detect": true,
    "adsorption": true, //加上吸附配置
    "config_demo": {
        "hide_card": false,
        "background_color": "#b61924",
        "background_image": "",
        "background_position": "50% 50%",
        "background_repeat": "no-repeat",
        "background_size": "cover"
    }
}

2、particles.js

var warea = {//加上
        x: null,
        y: null,
        max: 20000
    };

pJS.fn.particlesUpdate = function () {
        var repulse = pJS.interactivity.events.onhover.mode.indexOf("repulse");//加上
        if (pJS.adsorption && repulse < 0) {//加上
            var ndots = [warea].concat(pJS.particles.array);
        }
        for (var i = 0; i < pJS.particles.array.length; i++) {

            /* the particle */
            var p = pJS.particles.array[i];

            //吸附作用（下面for加上）
            if (pJS.adsorption && repulse < 0) {
                for (var z = 0; z < ndots.length; z++) {
                    var d2 = ndots[z];
                    if (p === d2 || d2.x === null || d2.y === null) {
                        continue;
                    }
                    var xc = p.x - d2.x;
                    var yc = p.y - d2.y;

                    // 两个粒子之间的距离
                    var dis = xc * xc + yc * yc;
                    if (dis < d2.max) {
                        // 如果是鼠标，则让粒子向鼠标的位置移动
                        if (d2 === warea && dis > (d2.max / 2)) {
                            p.x -= xc * 0.03;
                            p.y -= yc * 0.03;
                        }
                    }
                }
            }
        }

    };

pJS.interactivity.el.addEventListener('mousemove', function (e) {
                var pos_x, pos_y;
                if (pJS.interactivity.el == window) {
                    pos_x = e.clientX;
                    pos_y = e.clientY;
                }
                else {
                    pos_x = e.offsetX || e.clientX;
                    pos_y = e.offsetY || e.clientY;
                }
                //下班两行加上
                warea.x = pos_x;
                warea.y = pos_y;

            });

pJS.interactivity.el.addEventListener('mouseleave', function (e) {
                //下班两行加上
                warea.x = null;
                warea.y = null;

            });