https://app.guestnexus.ai/static//login/js/demo-1.js

1(function() {
2
3    var width, height, largeHeader, canvas, ctx, points, target, animateHeader = true;
4
5    // Main
6    initHeader();
7    initAnimation();
8    addListeners();
9
10    function initHeader() {
11        width = window.innerWidth;
12        height = window.innerHeight;
13        target = {x: width/2, y: height/2};
14
15        largeHeader = document.getElementById('large-header');
16        largeHeader.style.height = height+'px';
17
18        canvas = document.getElementById('demo-canvas');
19        canvas.width = width;
20        canvas.height = height;
21        ctx = canvas.getContext('2d');
22
23        // create points
24        points = [];
25        for(var x = 0; x < width; x = x + width/20) {
26            for(var y = 0; y < height; y = y + height/20) {
27                var px = x + Math.random()*width/20;
28                var py = y + Math.random()*height/20;
29                var p = {x: px, originX: px, y: py, originY: py };
30                points.push(p);
31            }
32        }
33
34        // for each point find the 5 closest points
35        for(var i = 0; i < points.length; i++) {
36            var closest = [];
37            var p1 = points[i];
38            for(var j = 0; j < points.length; j++) {
39                var p2 = points[j]
40                if(!(p1 == p2)) {
41                    var placed = false;
42                    for(var k = 0; k < 5; k++) {
43                        if(!placed) {
44                            if(closest[k] == undefined) {
45                                closest[k] = p2;
46                                placed = true;
47                            }
48                        }
49                    }
50
51                    for(var k = 0; k < 5; k++) {
52                        if(!placed) {
53                            if(getDistance(p1, p2) < getDistance(p1, closest[k])) {
54                                closest[k] = p2;
55                                placed = true;
56                            }
57                        }
58                    }
59                }
60            }
61            p1.closest = closest;
62        }
63
64        // assign a circle to each point
65        for(var i in points) {
66            var c = new Circle(points[i], 2+Math.random()*2, 'rgba(255,255,255,0.3)');
67            points[i].circle = c;
68        }
69    }
70
71    // Event handling
72    function addListeners() {
73        if(!('ontouchstart' in window)) {
74            window.addEventListener('mousemove', mouseMove);
75        }
76        window.addEventListener('scroll', scrollCheck);
77        window.addEventListener('resize', resize);
78    }
79
80    function mouseMove(e) {
81        var posx = posy = 0;
82        if (e.pageX || e.pageY) {
83            posx = e.pageX;
84            posy = e.pageY;
85        }
86        else if (e.clientX || e.clientY)    {
87            posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
88            posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
89        }
90        target.x = posx;
91        target.y = posy;
92    }
93
94    function scrollCheck() {
95        if(document.body.scrollTop > height) animateHeader = false;

96        else animateHeader = true;
97    }
98
99    function resize() {
100        width = window.innerWidth;
101        height = window.innerHeight;
102        largeHeader.style.height = height+'px';
103        canvas.width = width;
104        canvas.height = height;
105    }
106
107    // animation
108    function initAnimation() {
109        animate();
110        for(var i in points) {
111            shiftPoint(points[i]);
112        }
113    }
114
115    function animate() {
116        if(animateHeader) {
117            ctx.clearRect(0,0,width,height);
118            for(var i in points) {
119                // detect points in range
120                if(Math.abs(getDistance(target, points[i])) < 4000) {
121                    points[i].active = 0.3;
122                    points[i].circle.active = 0.6;
123                } else if(Math.abs(getDistance(target, points[i])) < 20000) {
124                    points[i].active = 0.1;
125                    points[i].circle.active = 0.3;
126                } else if(Math.abs(getDistance(target, points[i])) < 40000) {
127                    points[i].active = 0.02;
128                    points[i].circle.active = 0.1;
129                } else {
130                    points[i].active = 0;
131                    points[i].circle.active = 0;
132                }
133
134                drawLines(points[i]);
135                points[i].circle.draw();
136            }
137        }
138        requestAnimationFrame(animate);
139    }
140
141    function shiftPoint(p) {
142        TweenLite.to(p, 1+1*Math.random(), {x:p.originX-50+Math.random()*100,
143            y: p.originY-50+Math.random()*100, ease:Circ.easeInOut,
144            onComplete: function() {
145                shiftPoint(p);
146            }});
147    }
148
149    // Canvas manipulation
150    function drawLines(p) {
151        if(!p.active) return;
152        for(var i in p.closest) {
153            ctx.beginPath();
154            ctx.moveTo(p.x, p.y);
155            ctx.lineTo(p.closest[i].x, p.closest[i].y);
156            ctx.strokeStyle = 'rgba(156,217,249,'+ p.active+')';
157            ctx.stroke();
158        }
159    }
160
161    function Circle(pos,rad,color) {
162        var _this = this;
163
164        // constructor
165        (function() {
166            _this.pos = pos || null;
167            _this.radius = rad || null;
168            _this.color = color || null;
169        })();
170
171        this.draw = function() {
172            if(!_this.active) return;
173            ctx.beginPath();
174            ctx.arc(_this.pos.x, _this.pos.y, _this.radius, 0, 2 * Math.PI, false);
175            ctx.fillStyle = 'rgba(156,217,249,'+ _this.active+')';
176            ctx.fill();
177        };
178    }
179
180    // Util
181    function getDistance(p1, p2) {
182        return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2);
183    }
184    
185})();