add mouse and hover animation

bailey · Feb 25, 2024 · 44b08ba · 44b08ba
1 parent aa35f13
commit 44b08ba
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -4,6 +4,8 @@
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lilita+One">
 <link rel="icon" type="image/x-icon" href="assets/planet.png">
 
+<div id="cursorCircle"></div>
+
 <head>
     <script async src="https://us.umami.is/script.js" data-website-id="2905a2ba-9957-46f5-9196-a53624d26687"></script>
 </head>

diff --git a/index_style.css b/index_style.css
@@ -99,4 +99,18 @@ body {
     width: 60%;
     margin: 0 18%;
   }
-}
+}
+#cursorCircle {
+  width: 20px;
+  height: 20px;
+  fill: black;
+  background-color:#9193ff;
+  opacity: 50%;
+  border-radius: 50%;
+  position: fixed;
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+  transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease;
+  z-index: 9999;
+  display: none;
+}
diff --git a/resume.html b/resume.html
@@ -1,6 +1,9 @@
 <link rel="stylesheet" href="resume_style.css">
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lilita+One">
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Karla">
+<script src="script.js"></script>
+
+<div id="cursorCircle"></div>
 
 <header>
     recently...

diff --git a/resume_style.css b/resume_style.css
@@ -56,4 +56,17 @@ body {
     font-size: 50px;
     margin-top: -6vh;
     margin-left: -32%;
+  }
+  #cursorCircle {
+    width: 20px;
+    height: 20px;
+    background-color:#9193ff;
+    opacity: 50%;
+    border-radius: 50%;
+    position: fixed;
+    pointer-events: none;
+    transform: translate(-50%, -50%);
+    transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease;
+    z-index: 9999;
+    display: none;
   }
diff --git a/script.js b/script.js
@@ -0,0 +1,26 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const cursorCircle = document.getElementById('cursorCircle');
+    document.addEventListener('mousemove', function(e) {
+      cursorCircle.style.left = e.pageX + 'px';
+      cursorCircle.style.top = e.pageY + 'px';
+      cursorCircle.style.display = 'block';
+    });
+
+    const links = document.querySelectorAll('a');
+    document.addEventListener('mousemove', function(e) {
+      let closestDistance = Infinity;
+      links.forEach(link => {
+        const rect = link.getBoundingClientRect();
+        const linkX = rect.left + rect.width / 2;
+        const linkY = rect.top + rect.height / 2;
+        const distance = Math.sqrt(Math.pow(linkX - e.pageX, 2) + Math.pow(linkY - e.pageY, 2));
+        if (distance < closestDistance) {
+          closestDistance = distance;
+        }
+      });
+      const size = Math.max(20, Math.min(100, 100 - closestDistance));
+      cursorCircle.style.width = size + 'px';
+      cursorCircle.style.height = size + 'px';
+    });
+  });
+