SOURCE

(function () {

    var width, height, largeHeader, canvas, ctx, points, target, animateHeader = true;

    // Main
    initHeader();
    initAnimation();
    addListeners();

    function initHeader() {
        width = window.innerWidth;
        height = window.innerHeight;
        target = { x: width / 2, y: height / 2 };
        largeHeader = document.getElementById('large-header');
        largeHeader.style.height = height + 'px';

        canvas = document.getElementById('bg-canvas');
        canvas.width = width;
        canvas.height = height;
        ctx = canvas.getContext('2d');

        // create points
        points = [];
        for (var x = 0; x < width; x = x + width / 20) {
            for (var y = 0; y < height; y = y + height / 10) {
                var px = x + Math.random() * width / 20;
                var py = y + Math.random() * height / 20;
                var p = { x: px, originX: px, y: py, originY: py };
                points.push(p);
            }
        }
        points = [{x:9.488315903671726,originX:9.488315903671726,y:19.973934205080475,originY:19.973934205080475},
{x:1.4609669763034583,originX:1.4609669763034583,y:62.04790270726478,originY:62.04790270726478},
{x:34.70541719835297,originX:34.70541719835297,y:65.61146343216882,originY:65.61146343216882},
{x:56.72457655946687,originX:56.72457655946687,y:15.196932896228216,originY:15.196932896228216},
{x:98.87749460908324,originX:98.87749460908324,y:22.133983763549676,originY:22.133983763549676},
{x:145.70055593548082,originX:145.70055593548082,y:120.08487716337663,originY:120.08487716337663},
{x:191.02662299386466,originX:191.02662299386466,y:92.62967440481344,originY:92.62967440481344},
{x:252.082329432192,originX:252.082329432192,y:137.87127451264143,originY:137.87127451264143},
{x:270.0705498456303,originX:270.0705498456303,y:48.51621473429863,originY:48.51621473429863},
{x:289.26957267473057,originX:289.26957267473057,y:122.04978700289072,originY:122.04978700289072},
{x:288.19205444765527,originX:288.19205444765527,y:140.02021090420158,originY:140.02021090420158}]

        // for each point find the 5 closest points
        for (var i = 0; i < points.length; i++) {
            var closest = [];
            var p1 = points[i];
            for (var j = 0; j < points.length; j++) {
                var p2 = points[j]
                if (!(p1 == p2)) {
                    var placed = false;
                    for (var k = 0; k < 5; k++) {
                        if (!placed) {
                            if (closest[k] == undefined) {
                                closest[k] = p2;
                                placed = true;
                            }
                        }
                    }

                    for (var k = 0; k < 5; k++) {
                        if (!placed) {
                            if (getDistance(p1, p2) < getDistance(p1, closest[k])) {
                                closest[k] = p2;
                                placed = true;
                            }
                        }
                    }
                }
            }
            p1.closest = closest;
        }

        // assign a circle to each point
        for (var i in points) {
            var c = new Circle(points[i], 2 + Math.random() * 2, 'rgba(255,255,255,0.3)');
            points[i].circle = c;
        }
    }

    // Event handling
    function addListeners() {
        if (!('ontouchstart' in window)) {
            window.addEventListener('mousemove', mouseMove);
        }
        window.addEventListener('scroll', scrollCheck);
        window.addEventListener('resize', resize);
    }

    function mouseMove(e) {
        var posx = posy = 0;
        if (e.pageX || e.pageY) {
            posx = e.pageX;
            posy = e.pageY;
        }
        else if (e.clientX || e.clientY) {
            posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
            posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
        }
        target.x = posx;
        target.y = posy;
    }

    function scrollCheck() {
        if (document.body.scrollTop > height) animateHeader = false;
        else animateHeader = true;
    }

    function resize() {
        width = window.innerWidth;
        height = window.innerHeight;
        largeHeader.style.height = height + 'px';
        canvas.width = width;
        canvas.height = height;
    }

    // animation
    function initAnimation() {
        animate();
        loadImg(["https://source.chongbaby.cn/images/wxHead/20190219_a0355153a12a939d.png?x-oss-process=image/resize,h_86,w_86/circle,r_100/format,png"],function(imgArr){
            console.log(JSON.stringify(imgArr[0]))
        })
        for (var i in points) {
            let point = points[i]

            // console.log(`{x:${point.x},originX:${point.originX},y:${point.y},originY:${point.originY}}`)
            // shiftPoint(points[i]);
        }
    }

    function animate() {
        if (animateHeader) {
            ctx.clearRect(0, 0, width, height);
            for (var i in points) {
                // detect points in range
                if (Math.abs(getDistance(target, points[i])) < 4000) {
                    points[i].active = 0.3;
                    points[i].circle.active = 0.6;
                } else if (Math.abs(getDistance(target, points[i])) < 20000) {
                    points[i].active = 0.1;
                    points[i].circle.active = 0.3;
                } else if (Math.abs(getDistance(target, points[i])) < 40000) {
                    points[i].active = 0.02;
                    points[i].circle.active = 0.1;
                } else {
                    points[i].active = 0;
                    points[i].circle.active = 0;
                }

                    // points[i].active = 1;
                    points[i].circle.active = 1;
                drawLines(points[i]);
                points[i].circle.draw();
                i%2==0 && points[i].circle.drawImage("https://source.chongbaby.cn/images/wxHead/20190219_a0355153a12a939d.png?x-oss-process=image/resize,h_86,w_86/circle,r_100/format,png")
            }
        }
        requestAnimationFrame(animate);
    }

    function shiftPoint(p) {
        TweenLite.to(p, 1 + 1 * Math.random(), {
            x: p.originX - 50 + Math.random() * 100,
            y: p.originY - 50 + Math.random() * 100, ease: Circ.easeInOut,
            onComplete: function () {
                shiftPoint(p);
            }
        });
    }

    // Canvas manipulation
    function drawLines(p) {
        if (!p.active) return;
        for (var i in p.closest) {
            ctx.beginPath();
            ctx.moveTo(p.x, p.y);
            ctx.lineTo(p.closest[i].x, p.closest[i].y);
            ctx.strokeStyle = 'rgba(156,217,249,' + p.active + ')';
            ctx.stroke();
        }
    }

    function Circle(pos, rad, color) {
        var _this = this;

        // constructor
        (function () {
            _this.pos = pos || null;
            _this.radius = rad || null;
            _this.color = color || null;
        })();

        this.draw = function () {
            if (!_this.active) return;
            ctx.beginPath();
            ctx.arc(_this.pos.x, _this.pos.y, _this.radius, 0, 2 * Math.PI, false);
            ctx.fillStyle = 'rgba(156,217,249,' + _this.active + ')';
            ctx.fill();
        };
        this.drawImage = function (src) {
            if (!_this.active) return;
            var image = new Image();
			image.src = src;
            ctx.globalCompositeOperation = "source-over";
            ctx.drawImage(image,_this.pos.x-25, _this.pos.y-25, 50,50);
        };
    }

    // Util
    function getDistance(p1, p2) {
        return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2);
    }

    function loadImg(urlArr, cb) {
                console.log("loadImg", urlArr)
			var index = 0;
			var res = [];
			// 每次给 load 函数传入一个图片路径，来加载图片
			load(urlArr[index]);
			function load(url) {
                console.log(url)
				// 如果 index 等于 urlArr.length，
				// 表示加载完 全部图片了，就结束 load函数
				if (index == urlArr.length) {
					// 加载完全部图片，调用 init 函数
					cb(res);
					return;
				}

				var img = new Image();
				img.src = url;
				// 不管当前图片是否加载成功，都要加载下一张图片
				img.onload = next;
				img.onerror = function () {
					console.log(res[index] + "加载失败");
					next();
				}
				// next 用来加载下一张图片
				function next() {
					// 把加载后的图片，保存到 res 中
					res[index] = img;
					load(urlArr[++index])
				}
			}
			// 最后返回保存所有真实图片的数组
			return res;
		}

})();

<div id="large-header" class="large-header" style="height: 540px;">
	<canvas id="bg-canvas" width="1832" height="540"></canvas>
</div>