Skip to content

Commit 0a10523

Browse files
Manaregr8Manaregr8
authored
Merge pull request #327 from Ridhima10/animated-cursor
Added animated cursor functionality
2 parents 0156970 + b24a5d1 commit 0a10523

File tree

5 files changed

+1187
-818
lines changed

5 files changed

+1187
-818
lines changed

‎public/css/styles.css

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,27 @@ body {
117117
height: 5rem;
118118
z-index: 1000;
119119
}
120+
/* cursor */
121+
.circle {
122+
z-index: 10000;
123+
width: 20px;
124+
height: 20px;
125+
border-radius: 50%;
126+
pointer-events: none;
127+
animation: colors 5s infinite;
128+
position: fixed;
129+
transform: translate(-50%, -50%);
130+
}
120131

132+
.circle::before {
133+
content: "";
134+
position: fixed;
135+
width: 50px;
136+
height: 50px;
137+
opacity: 0.2;
138+
transform: translate(-30%, -30%);
139+
border-radius: 50%;
140+
}
121141
/* navigation bar font size transition styling*/
122142

123143

‎server/views/about.ejs

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,20 @@
3939
</head>
4040

4141
<body class="page-leaderboard">
42+
<div class="circle-container">
43+
<div class="circle" style="background-color: #55a5ea; left: 504px; top: 59px; scale: 1;"></div>
44+
<div class="circle" style="background-color: #55a5ea; left: 504px; top: 59px; scale: 0.95;"></div>
45+
<div class="circle" style="background-color: #55a5ea; left: 504px; top: 59px; scale: 0.9;"></div>
46+
<div class="circle" style="background-color: #55a5ea; left: 504px; top: 59px; scale: 0.9;"></div>
47+
<div class="circle" style="background-color: #3fbcc0c6; left: 504px; top: 59px; scale: 0.85;"></div>
48+
<div class="circle" style="background-color: #3fbcc0c6; left: 504px; top: 59px; scale: 0.85;"></div>
49+
<div class="circle" style="background-color: #3fbcc0c6; left: 504px; top: 59px; scale: 0.85;"></div>
50+
<div class="circle" style="background-color: #3fbcc0c6; left: 504px; top: 59px; scale: 0.85;"></div>
51+
<div class="circle" style="background-color: #fff; left: 504px; top: 59px; scale: 0.8;"></div>
52+
<div class="circle" style="background-color: #fff; left: 504px; top: 59px; scale: 0.8;"></div>
53+
<div class="circle" style="background-color: #fff; left: 504px; top: 59px; scale: 0.8;"></div>
54+
<div class="circle" style="background-color: #fff; left: 504px; top: 59px; scale: 0.8;"></div>
55+
</div>
4256
<!-- Body of the webpage. Background color set inline. -->
4357
<nav class="nav">
4458
<!-- Navigation section. -->
@@ -327,7 +341,68 @@
327341
</footer>
328342
</body>
329343
<script>
344+
//Custom Cursor
330345
346+
const coords = { x: 0, y: 0 };
347+
const circles = document.querySelectorAll(".circle");
348+
349+
const colors = [
350+
"#55a5ea",
351+
"#55a5ea",
352+
"#55a5ea",
353+
"#55a5ea",
354+
"#55a5ea",
355+
"#55a5ea",
356+
"#55a5ea",
357+
"#55a5ea",
358+
"#3fbcc0c6",
359+
"#3fbcc0c6",
360+
"#3fbcc0c6",
361+
"#3fbcc0c6",
362+
"#3fbcc0c6",
363+
"#3fbcc0c6",
364+
"fff",
365+
"fff",
366+
"fff",
367+
"fff",
368+
"fff",
369+
"fff",
370+
"fff",
371+
];
372+
373+
circles.forEach(function (circle, index) {
374+
circle.x = 0;
375+
circle.y = 0;
376+
circle.style.backgroundColor = colors[index % colors.length];
377+
});
378+
379+
window.addEventListener("mousemove", function (e) {
380+
coords.x = e.clientX;
381+
coords.y = e.clientY;
382+
});
383+
384+
function animateCircles() {
385+
let x = coords.x;
386+
let y = coords.y;
387+
388+
circles.forEach(function (circle, index) {
389+
circle.style.left = x - 12 + "px";
390+
circle.style.top = y - 12 + "px";
391+
392+
circle.style.scale = (circles.length - index) / circles.length;
393+
394+
circle.x = x;
395+
circle.y = y;
396+
397+
const nextCircle = circles[index + 1] || circles[0];
398+
x += (nextCircle.x - x) * 0.3;
399+
y += (nextCircle.y - y) * 0.3;
400+
});
401+
402+
requestAnimationFrame(animateCircles);
403+
}
404+
405+
animateCircles();
331406
332407
document.querySelector('.toggler').addEventListener('click', function () {
333408
document.querySelector('.social-icons').classList.toggle('show-icons');

0 commit comments

Comments
 (0)