custom cursor added

apu52 · Jun 9, 2024 · 650424c · 650424c
1 parent 94cb263
commit 650424c
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -137,7 +137,7 @@
 <body style="background-color: var(--secondary-color);">
 
   <body>
-
+    <div class="dot"></div>
     <div id="pre-loader">
       <h1>TourGuide . . .</h1>
     </div>
@@ -166,6 +166,7 @@ <h1>TourGuide . . .</h1>
     <button id="toggle" data-aos="fade-down">Dark Theme</button>
     <a href="#contact"><button class="btn" id="btn-style">Contact Us</button></a>
   </nav> -->
+
     <div class="nav-container" id="top">
       <nav class="newNav">
         <a href="#" class="nav__logo" data-aos="fade-right">Tourguide<span>.</span></a>
@@ -597,6 +598,42 @@ <h2 class="section__title">Best trip packages</h2>
     crossorigin="anonymous"></script>
     <script src="jquery.flipster.min.js"></script>
 <script>
+  // Custom Cursor
+  const dots = [];
+    const cursor = {
+      x: 0,
+      y: 0,
+    };
+
+    for (let i = 0; i < 10; i++) {
+      const dot = document.createElement("div");
+      dot.style.scale=`0.${10-(i)}`;
+      dot.className = "dot";
+      document.body.appendChild(dot);
+      dots.push(dot);
+    }
+
+    document.addEventListener("mousemove", (e) => {
+      cursor.x = e.clientX;
+      cursor.y = e.clientY;
+    });
+
+    function draw() {
+      let x = cursor.x;
+      let y = cursor.y;
+
+      dots.forEach((dot, index) => {
+        const nextDot = dots[index + 1] || dots[0];
+
+        dot.style.left = x + "px";
+        dot.style.top = y + "px";
+
+        x += (nextDot.offsetLeft - dot.offsetLeft) * 0.5;
+        y += (nextDot.offsetTop - dot.offsetTop) * 0.5;
+      });
+    }
+
+    setInterval(draw, 10);
 $('.carousel').flipster({
     style:'carousel',
     spacing: -0.3,

diff --git a/mouseEffect.js b/mouseEffect.js
@@ -9,8 +9,8 @@ document.addEventListener('mousemove', function(event) {
     ripple.className = 'ripple';
     let relativeX = x + scrollLeft;
     let relativeY = y + scrollTop;
-    ripple.style.left = `${relativeX  - 5}px`;
-    ripple.style.top = `${relativeY - 5}px`;
+    ripple.style.left = `${relativeX  - 1}px`;
+    ripple.style.top = `${relativeY - 12}px`;
 
     document.body.appendChild(ripple);
 

diff --git a/styles.css b/styles.css
@@ -270,6 +270,7 @@
 }
 
 body {
+  cursor: none;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -692,6 +693,7 @@ header {
 /* Newsletter Modal */
 
 .modal-container {
+  cursor: auto;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2383,3 +2385,18 @@ body {
 }
 
 
+/* Custom Cursor */
+
+.dot {
+  width: 30px;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgb(112, 224, 222);
+  position: fixed;
+  border-radius: 50%;
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+}
+