https://ntpark.rs/wp-content/themes/ntp/ntp_assets/js/homepage_animation.js?ver=6abf2929702b9

1let menuBtn = document.querySelector("#menuBtn");
2let curs = document.querySelector(".cursor");
3let menuItems = document.querySelectorAll(".menu-item");
4let mainText = document.querySelector(".mainText");
5
6document.addEventListener("mousemove", (e) => {
7    let header_width = $("#homepage_header").width();
8    let header_height = $("#homepage_header").outerHeight();
9    let header_container_width = $("#homepage_container").width();
10    let header_container_height = $("#homepage_container").outerHeight();
11
12    // console.log(header_container_height);
13
14    let x = e.pageX;
15    let y = e.pageY;
16
17    let width_margin_fixes = (header_width - header_container_width) / 2;
18    let height_margin_fixes = (header_height - header_container_height) / 2;
19
20    curs.style.left = x - width_margin_fixes + "px";
21    curs.style.top = y - height_margin_fixes - 5 + "px";
22});
23
24let flag = true;
25
26// Taken from https://codepen.io/enesser/pen/jdenE
27
28function main() {
29    let scene = new THREE.Scene();
30    let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
31    let webGLRenderer = new THREE.WebGLRenderer();
32    webGLRenderer.setClearColor(new THREE.Color(0x000000, 1.0));
33    webGLRenderer.setSize(window.innerWidth, window.innerHeight);
34    webGLRenderer.shadowMapEnabled = true;
35
36    camera.position.x = -30;
37    camera.position.y = 40;
38    camera.position.z = 50;
39    camera.lookAt(new THREE.Vector3(10, 0, 0));
40    
41    if ( ! $('#WebGL-output').length ) {
42    	return;
43    }
44
45    document.querySelector("#WebGL-output").append(webGLRenderer.domElement);
46
47    let step = 0;
48
49    let knot;
50
51    let controls = new(function() {
52        this.radius = 40;
53        this.tube = 17;
54        this.radialSegments = 186;
55        this.tubularSegments = 4;
56        this.p = 9;
57        this.q = 1;
58        this.heightScale = 4;
59        this.asParticles = true;
60        this.rotate = true;
61
62        this.redraw = function() {
63            if (knot) scene.remove(knot);
64
65            let geom = new THREE.TorusKnotGeometry(controls.radius, controls.tube, Math.round(controls.radialSegments), Math.round(controls.tubularSegments), Math.round(controls.p), Math.round(controls.q), controls.heightScale);
66
67            if (controls.asParticles) {
68                knot = createParticleSystem(geom);
69            } else {
70                knot = createMesh(geom);
71            }
72
73            scene.add(knot);
74        };
75    })();
76
77    let gui = new dat.GUI();
78    gui.add(controls, "radius", 0, 40).onChange(controls.redraw);
79    gui.add(controls, "tube", 0, 40).onChange(controls.redraw);
80    gui.add(controls, "radialSegments", 0, 400).step(1).onChange(controls.redraw);
81    gui.add(controls, "tubularSegments", 1, 20).step(1).onChange(controls.redraw);
82    gui.add(controls, "p", 1, 10).step(1).onChange(controls.redraw);
83    gui.add(controls, "q", 1, 15).step(1).onChange(controls.redraw);
84    gui.add(controls, "heightScale", 0, 5).onChange(controls.redraw);
85    gui.add(controls, "asParticles").onChange(controls.redraw);
86    gui.add(controls, "rotate").onChange(controls.redraw);
87
88    gui.close();
89
90    controls.redraw();
91
92    render();
93
94    function generateSprite() {
95        let canvas = document.createElement("canvas");
96        canvas.width = 16;
97        canvas.height = 16;
98
99        let context = canvas.getContext("2d");
100        let gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2);
101        gradient.addColorStop(0, "rgba(255,255,255,1)");
102        gradient.addColorStop(0.2, "rgba(0,255,255,1)");
103        gradient.addColorStop(0.4, "rgba(0,0,64,1)");
104        gradient.addColorStop(1, "rgba(0,0,0,1)");
105
106        context.fillStyle = gradient;
107        context.fillRect(0, 0, canvas.width, canvas.height);
108
109        let texture = new THREE.Texture(canvas);
110        texture.needsUpdate = true;
111        return texture;
112    }
113
114    function createParticleSystem(geom) {
115        let material = new THREE.ParticleBasicMaterial({
116            color: 0xffffff,
117            size: 2,
118            transparent: true,
119            blending: THREE.AdditiveBlending,
120            map: generateSprite(),
121        });
122
123        let system = new THREE.ParticleSystem(geom, material);
124        system.sortParticles = true;
125        return system;
126    }
127
128    function createMesh(geom) {
129        let meshMaterial = new THREE.MeshNormalMaterial({});
130        meshMaterial.side = THREE.DoubleSide;
131
132        let mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial]);
133
134        return mesh;
135    }
136
137    function render() {

138        if (controls.rotate) {
139            knot.rotation.y = step += 0.00058;
140        }
141
142        requestAnimationFrame(render);
143        webGLRenderer.render(scene, camera);
144    }
145}
146
147$(".menu-item").hover(function() {
148    let sub_navigation_id = $(this).data("target");
149
150    $(".sub_nav").removeClass("d_block");
151    $(".sub_nav").addClass("d_none");
152
153    $(".main_nav").find(".active").removeClass("active");
154
155    $(this).addClass("active");
156
157    $("#" + sub_navigation_id).addClass("d_block");
158});
159
160$(".subTitle, .mainTitle").on("mouseenter", function() {
161    $("#cursor").addClass("cursor_hover");
162});
163
164$(".subTitle, .mainTitle").on("mouseleave", function() {
165    $("#cursor").removeClass("cursor_hover");
166});
167
168$("#ntp_carousel_homepage").on("slide.bs.carousel", function(item) {
169    let current_slide = item.to;
170
171    $(".homepage_nav_indicators").removeClass("active");
172
173    $.each($(".homepage_nav_indicators"), function() {
174        if (current_slide == $(this).data("slide-to")) {
175            $(this).addClass("active");
176        }
177    });
178});
179
180main();