Skip to content

Commit d5ccfb0

Browse files
isimarjitsinghisimarjitsingh
authored
Update events.html
1 parent 1a7e23f commit d5ccfb0

File tree

1 file changed

+97
-1
lines changed

1 file changed

+97
-1
lines changed

‎events.html

+97-1
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,103 @@
102102
</style>
103103
</head>
104104
<body>
105-
105+
<style>
106+
.circle {
107+
position: absolute;
108+
width: 25px;
109+
height: 25px;
110+
border-radius: 50%;
111+
pointer-events: none;
112+
background: radial-gradient(circle, rgba(73, 232, 247, 0.466), rgba(141, 38, 172, 0.5));
113+
transition: transform 0.1s, left 0.1s, top 0.1s;
114+
}
115+
116+
.circle-container {
117+
position: fixed;
118+
top: 0;
119+
left: 0;
120+
width: 100%;
121+
height: 100%;
122+
pointer-events: none;
123+
z-index: 9999;
124+
}
125+
</style>
126+
127+
<body>
128+
<div class="circle-container">
129+
<div class="circle"></div>
130+
<div class="circle"></div>
131+
<div class="circle"></div>
132+
<div class="circle"></div>
133+
<div class="circle"></div>
134+
<div class="circle"></div>
135+
<div class="circle"></div>
136+
<div class="circle"></div>
137+
<div class="circle"></div>
138+
<div class="circle"></div>
139+
<div class="circle"></div>
140+
<div class="circle"></div>
141+
<div class="circle"></div>
142+
<div class="circle"></div>
143+
<div class="circle"></div>
144+
<div class="circle"></div>
145+
<div class="circle"></div>
146+
<div class="circle"></div>
147+
<div class="circle"></div>
148+
<div class="circle"></div>
149+
<div class="circle"></div>
150+
<div class="circle"></div>
151+
<div class="circle"></div>
152+
<div class="circle"></div>
153+
<div class="circle"></div>
154+
<div class="circle"></div>
155+
<div class="circle"></div>
156+
<div class="circle"></div>
157+
<div class="circle"></div>
158+
<div class="circle"></div>
159+
</div>
160+
<script>
161+
document.addEventListener("DOMContentLoaded", function () {
162+
const coords = { x: 0, y: 0 };
163+
const circles = document.querySelectorAll(".circle");
164+
165+
circles.forEach(function (circle) {
166+
circle.x = 0;
167+
circle.y = 0;
168+
});
169+
170+
window.addEventListener("mousemove", function (e) {
171+
coords.x = e.pageX;
172+
coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
173+
});
174+
175+
function animateCircles() {
176+
let x = coords.x;
177+
let y = coords.y;
178+
179+
circles.forEach(function (circle, index) {
180+
circle.style.left = `${x - 12}px`;
181+
circle.style.top = `${y - 12}px`;
182+
circle.style.transform = `scale(${(circles.length - index) / circles.length})`;
183+
184+
const nextCircle = circles[index + 1] || circles[0];
185+
circle.x = x;
186+
circle.y = y;
187+
188+
x += (nextCircle.x - x) * 0.3;
189+
y += (nextCircle.y - y) * 0.3;
190+
});
191+
192+
requestAnimationFrame(animateCircles);
193+
}
194+
195+
animateCircles();
196+
});
197+
198+
</script>
199+
200+
</body>
201+
106202
<div class="container">
107203
<h2>Create a New Event</h2>
108204
<form id="eventForm">

0 commit comments

Comments
 (0)