Skip to content

Commit 51b9ab7

Browse files
Praneeth-2602Praneeth-2602
authored
Added Dynamic Element Tracker Cursor (#1358)
1 parent f27d50a commit 51b9ab7

File tree

4 files changed

+143
-0
lines changed

4 files changed

+143
-0
lines changed

‎Components/Cursors/Dynamic-Element-Tracker/index.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Custom Cursor</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="cursor-dot" id="cursor-dot"></div>
11+
<div class="cursor-circle" id="cursor-circle"></div>
12+
<div class="wrapper">
13+
<a class="link" style="--size: 60px">😱</a>
14+
<a class="link" style="--size: 80px">😍</a>
15+
<a class="link" style="--size: 60px">😱</a>
16+
</div>
17+
<div class="wrapper">
18+
<button class="button">Works with rects, too</button>
19+
</div>
20+
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
21+
<script src="script.js"></script>
22+
</body>
23+
</html>

‎Components/Cursors/Dynamic-Element-Tracker/script.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
const cursorDot = document.getElementById('cursor-dot');
2+
const cursorCircle = document.getElementById('cursor-circle');
3+
4+
let isHovering = false;
5+
6+
document.addEventListener('mousemove', (e) => {
7+
gsap.to(cursorDot, {
8+
x: e.clientX,
9+
y: e.clientY,
10+
duration: 0.1,
11+
});
12+
if (!isHovering) {
13+
gsap.to(cursorCircle, {
14+
x: e.clientX,
15+
y: e.clientY,
16+
duration: 0.3,
17+
});
18+
}
19+
});
20+
21+
document.querySelectorAll('a, button').forEach((elem) => {
22+
elem.addEventListener('mouseenter', () => {
23+
isHovering = true;
24+
const rect = elem.getBoundingClientRect();
25+
const borderRadius = elem.tagName.toLowerCase() === 'button' ? '5px' : '50%';
26+
gsap.to(cursorCircle, {
27+
width: rect.width,
28+
height: rect.height,
29+
borderRadius: borderRadius,
30+
x: rect.left + rect.width / 2,
31+
y: rect.top + rect.height / 2,
32+
duration: 0.3,
33+
});
34+
});
35+
elem.addEventListener('mouseleave', () => {
36+
isHovering = false;
37+
gsap.to(cursorCircle, {
38+
width: 50,
39+
height: 50,
40+
borderRadius: '50%',
41+
duration: 0.3,
42+
});
43+
});
44+
});

‎Components/Cursors/Dynamic-Element-Tracker/style.css‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
body {
2+
display: flex;
3+
align-items: center;
4+
justify-content: center;
5+
flex-direction: column;
6+
min-height: 100vh;
7+
background: rgba(25, 25, 25, 1);
8+
cursor: none;
9+
-webkit-font-smoothing: antialiased;
10+
-moz-osx-font-smoothing: grayscale;
11+
}
12+
13+
.wrapper {
14+
display: flex;
15+
align-items: center;
16+
justify-content: center;
17+
margin: 1em 0;
18+
}
19+
20+
.cursor-dot,
21+
.cursor-circle {
22+
position: fixed;
23+
top: 0;
24+
left: 0;
25+
pointer-events: none;
26+
z-index: 1000;
27+
transform: translate(-50%, -50%);
28+
}
29+
30+
.cursor-dot {
31+
width: 8px;
32+
height: 8px;
33+
background: rgb(52, 178, 136);
34+
border-radius: 50%;
35+
}
36+
37+
.cursor-circle {
38+
width: 30px;
39+
height: 30px;
40+
border: 2px solid rgb(52, 178, 136);
41+
border-radius: 50%;
42+
}
43+
44+
.link {
45+
display: flex;
46+
align-items: center;
47+
justify-content: center;
48+
margin: 0 1em;
49+
width: var(--size);
50+
height: var(--size);
51+
background: rgba(255, 255, 255, .1);
52+
border-radius: 100%;
53+
}
54+
55+
.button {
56+
appearance: none;
57+
border: none;
58+
color: white;
59+
cursor: inherit;
60+
padding: 0.5em 1em;
61+
background: rgba(255, 255, 255, .1);
62+
border-radius: 5px;
63+
}

‎assets/html_files/cursors.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,19 @@ <h1>Dot Cursor</h1>
135135
</a>
136136
</div>
137137
</div>
138+
<div class="box">
139+
<h1>Dynamic Element Tracker</h1>
140+
<div class="preview">
141+
<a href="../../Components/Cursors/Dynamic-Element-Tracker/index.html" title="Live Preview" target="_blank">
142+
<img src="../images/link.png">
143+
</a>
144+
</div>
145+
<div class="source">
146+
<a href="https://github.com/Rakesh9100/Beautiify/tree/main/Components/Cursors/Dynamic-Element-Tracker" title="Source Code" target="_blank">
147+
<img src="../images/github.png">
148+
</a>
149+
</div>
150+
</div>
138151
</div>
139152
</section>
140153

0 commit comments

Comments
 (0)