-
Notifications
You must be signed in to change notification settings - Fork 0
/
floatingEmoji.js
78 lines (65 loc) · 1.78 KB
/
floatingEmoji.js
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
let isDone = false;
let x = parseFloat(12);
let y = parseFloat(12);
let phase = Math.random() * 360;
let radius = Math.random() * 1;
let speed = 1 + Math.random() * 2;
let scale = 0.2 + Math.random() * 0.8;
let grow = 0.1;
let alpha = 2;
const reset = () => {
isDone = false;
x = parseFloat(12);
y = parseFloat(12);
phase = Math.random() * 360;
radius = Math.random() * 1;
speed = 1 + Math.random() * 2;
scale = 0.2 + Math.random() * 0.8;
grow = 0.1;
alpha = 2;
}
const draw = () => {
const emoji = document.getElementById('emoji-btn');
emoji.style.transform = `translateX(${x}px) translateY(${y}px) translateZ(0) scale(${grow})`;
emoji.style.opacity = alpha;
};
const update = () => {
if (alpha > 0) {
alpha -= 0.009;
}
if (alpha < 0) {
alpha = 0;
}
x += Math.cos(phase / 20) * radius;
y -= speed;
grow += (scale - grow) / 10;
phase += 1;
const emojiBtn = document.getElementById('emoji-btn');
const parent = emojiBtn.parentElement;
const done = alpha <= 0 || -y > parent.clientHeight - 0.3 * parent.clientHeight;
// console.log('ypdate: ...', document.getElementById('emoji-btn').style.y);
isDone = done;
if (isDone) {
console.log('y: ', y);
console.log('');
}
};
function startAnimation() {
requestAnimationFrame(animation);
function animation() {
if (!isDone) {
update();
draw();
requestAnimationFrame(animation);
} else {
const emojiBtn = document.getElementById('emoji-btn');
emojiBtn.style.transform = 'scale(0)';
emojiBtn.style.opacity = '';
reset();
startAnimation();
}
}
}
(function () {
startAnimation();
})()