Saviru.github.io/buttons.js at main · Saviru/Saviru.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
const buttons = document.querySelectorAll(".mainBtns");

buttons.forEach(button => {
    button.addEventListener("mousemove", (event) => {
        const rect = button.getBoundingClientRect();
        const { style } = button;

    const right = event.offsetX > rect.width/2;
    const top = event.offsetY < rect.height/2;

    style.removeProperty("--tr");
    style.removeProperty("--br");
    style.removeProperty("--tl");
    style.removeProperty("--bl");

    if(right) {
        button.classList.add("right");
    } else {
        button.classList.remove("right");
    }


    if (top && right) {
        style.setProperty("--tr", "0");
    } else if (!top && right) {
        style.setProperty("--br", "0");
    } else if (!top && !right) {
        style.setProperty("--bl", "0");
    } else if (top && !right) {
        style.setProperty("--tl", "0");
    }

    style.setProperty("--x", `${event.offsetX}px`);
    style.setProperty("--y", `${event.offsetY}px`);

    button.addEventListener("mouseleave", () => {
        const { style } = button;
        style.removeProperty("--tr");
        style.removeProperty("--br");
        style.removeProperty("--bl");
        style.removeProperty("--tl");
    });

});
});