ThomKaar.github.io/master.js at main · ThomKaar/ThomKaar.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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
const doorImage = document.getElementById('locked-door');
const highlightDoor = document.getElementById('highlight-door');
const doorContainer = document.getElementsByClassName('rel-container')[0];
const invite = document.getElementsByClassName('invite')[0];
const smashBall = document.getElementsByClassName('forknite')[0];
const diegoHead = document.getElementsByClassName('diego')[0];
let intervalId;

let alternatorPointer = 1;
const alternator = {
    0: doorImage,
    1: highlightDoor
}

// function enableOpacityInterval() {
//     changeOpacity();
//     intervalId = setInterval(changeOpacity, 2000)
// };

// function removeOpacityAndInterval () {
//     doorImage.style.opacity = 1;
//     highlightDoor.style.opacity = 0;
//     clearInterval(intervalId);
// }

// doorContainer?.addEventListener('mouseenter', enableOpacityInterval);
// doorContainer?.addEventListener('mouseleave', removeOpacityAndInterval);


// // changeOpacity
// function changeOpacity() {
//     console.log('we are running change opacity!');
//     if (alternatorPointer == 0) {
//         doorImage.style.opacity = 1;
//         highlightDoor.style.opacity = 0;
//     } else {
//         doorImage.style.opacity = 0;
//         highlightDoor.style.opacity = 1;
//     }
//     alternatorPointer = alternatorPointer ? 0 : 1;
// }

// doorContainer?.addEventListener('mouseenter', enableOpacityInterval);
// doorContainer?.addEventListener('mouseleave', removeOpacityAndInterval);
// doorContainer?.addEventListener('click', revealInvite);

// function revealInvite () {
//     doorContainer.removeEventListener('mouseenter', enableOpacityInterval);
//     doorContainer.removeEventListener('mouseleave', removeOpacityAndInterval);
//     removeOpacityAndInterval(intervalId);
//     doorContainer.style.display = 'none';
//     invite.style.display = 'block';
// }

const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let interval = null;

document.getElementById('coder-name').onmouseover = event => {
    let iteration = 0;
    clearInterval(interval);

    interval = setInterval(() => {
        event.target.innerText = event.target.innerText
            .split("")
            .map((letter, index) => {
                if (index < iteration) {
                    return event.target.dataset.name[index];
                }


                return letters[Math.floor(Math.random() * 26)];
            })
            .join("");
        if (iteration >= event.target.dataset.name.length) {
            clearInterval(interval);
        }

        iteration += 1 / 3;
    }, 30);
};

/** Begin bubble animation js */
const wrapper = document.getElementById("bubble-wrapper");

const animateBubble = x => {
    const bubble = document.createElement('div');

    bubble.className = "bubble";

    bubble.style.left = `${x}px`;

    wrapper.appendChild(bubble);

    bubble.style.background = 'linear-gradient(135deg, #3b82f6 0%, #06b6d4 50%, #8b5cf6 100%)'

    setTimeout(() => wrapper.removeChild(bubble), 2000);
};

window.onmousemove = e => animateBubble(e.clientX);