forked from anasjawed283/Open-For-All
-
Notifications
You must be signed in to change notification settings - Fork 0
/
bubble_trail.js
28 lines (20 loc) · 958 Bytes
/
bubble_trail.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
const colors = ["#66BFBF", "#EAF6F6", "#FF0063"];
let animateCircleFragment = document.createDocumentFragment();
function animateCircle(event) {
let circleDivElem = document.createElement("div");
circleDivElem.classList = "circle";
animateCircleFragment.appendChild(circleDivElem);
document.body.appendChild(animateCircleFragment);
circleDivElem.style.left = event.clientX + "px";
circleDivElem.style.top = event.clientY + "px";
let color = colors[Math.floor(Math.random() * colors.length)];
circleDivElem.style.borderColor = color;
circleDivElem.style.transition = "all 0.5s linear 0s";
circleDivElem.style.left = circleDivElem.offsetLeft - 20 + "px";
circleDivElem.style.top = circleDivElem.offsetTop - 20 + "px";
circleDivElem.style.width = "40px";
circleDivElem.style.height = "40px";
circleDivElem.style.borderWidth = "5px";
circleDivElem.style.opacity = 0;
}
document.addEventListener("mousemove", animateCircle);