https://ubcfinance.com/temp/custom/assets/js/magiccursor.js

1class Cursor {
2    constructor(options) {
3        this.options = $.extend(true, {
4            container: "body",
5            speed: 0.7,
6            ease: "expo.out",
7            visibleTimeout: 300
8        }, options);
9        this.body = $(this.options.container);
10        this.el = $('<div class="cb-cursor"></div>');
11        this.text = $('<div class="cb-cursor-text"></div>');
12        this.init();
13    }
14
15    init() {
16        this.el.append(this.text);
17        this.body.append(this.el);
18        this.bind();
19        this.move(-window.innerWidth, -window.innerHeight, 0);
20    }
21
22    bind() {
23        const self = this;
24
25        this.body.on('mouseleave', () => {
26            self.hide();
27        }).on('mouseenter', () => {
28            self.show();
29        }).on('mousemove', (e) => {
30            this.pos = {
31                x: this.stick ? this.stick.x - ((this.stick.x - e.clientX) * 0.15) : e.clientX,
32                y: this.stick ? this.stick.y - ((this.stick.y - e.clientY) * 0.15) : e.clientY
33            };
34            this.update();
35        }).on('mousedown', () => {
36            self.setState('-active');
37        }).on('mouseup', () => {
38            self.removeState('-active');
39        }).on('mouseenter', 'a,input,textarea,button', () => {
40            self.setState('-pointer');
41        }).on('mouseleave', 'a,input,textarea,button', () => {
42            self.removeState('-pointer');
43        }).on('mouseenter', 'iframe', () => {
44            self.hide();
45        }).on('mouseleave', 'iframe', () => {
46            self.show();
47        }).on('mouseenter', '[data-cursor]', function () {
48            self.setState(this.dataset.cursor);
49        }).on('mouseleave', '[data-cursor]', function () {
50            self.removeState(this.dataset.cursor);
51        }).on('mouseenter', '[data-cursor-text]', function () {
52            self.setText(this.dataset.cursorText);
53        }).on('mouseleave', '[data-cursor-text]', function () {
54            self.removeText();
55        }).on('mouseenter', '[data-cursor-stick]', function () {
56            self.setStick(this.dataset.cursorStick);
57        }).on('mouseleave', '[data-cursor-stick]', function () {
58            self.removeStick();
59        });
60    }
61
62    setState(state) {
63        this.el.addClass(state);
64    }
65
66    removeState(state) {
67        this.el.removeClass(state);
68    }
69
70    toggleState(state) {
71        this.el.toggleClass(state);
72    }
73
74    setText(text) {
75        this.text.html(text);
76        this.el.addClass('-text');
77    }
78
79    removeText() {
80        this.el.removeClass('-text');
81    }
82
83    setStick(el) {
84        const target = $(el);
85        const bound = target.get(0).getBoundingClientRect();
86        this.stick = {
87            y: bound.top + (target.height() / 2),
88            x: bound.left + (target.width() / 2)
89        };
90        this.move(this.stick.x, this.stick.y, 5);
91    }
92
93    removeStick() {
94        this.stick = false;
95    }
96
97    update() {
98        this.move();
99        this.show();
100    }
101
102    move(x, y, duration) {
103        gsap.to(this.el, {
104            x: x || this.pos.x,
105            y: y || this.pos.y,
106            force3D: true,
107            overwrite: true,
108            ease: this.options.ease,
109            duration: this.visible ? (duration || this.options.speed) : 0
110        });
111    }
112
113    show() {
114        if (this.visible) return;
115        clearInterval(this.visibleInt);
116        this.el.addClass('-visible');
117        this.visibleInt = setTimeout(() => this.visible = true);
118    }
119
120    hide() {
121        clearInterval(this.visibleInt);
122        this.el.removeClass('-visible');
123        this.visibleInt = setTimeout(() => this.visible = false, this.options.visibleTimeout);
124    }
125}
126// Init cursor
127const cursor = new Cursor();