Merge pull request #66 from Manishkr1007/main

Adding custom cursor using html css and js

.vscode/settings.json

@@ -1,4 +1,4 @@
 {
-"liveServer.settings.port": 5502,
+"liveServer.settings.port": 5503,
 "git.ignoreLimitWarning": true
 }

css/style.css

@@ -64,6 +64,17 @@ body.offcanvas-menu:before {
 .text-black {
     color: #000 !important;
 }
+#cursor {
+    height: 20px;
+    width: 20px;
+    background-color: #16abab;
+    border-radius: 50%;
+    position: fixed;
+    z-index: 99;
+    transition: all linear 0.1s;
+  }
+
+
 
 .userlink {
     color: white;
@@ -26302,6 +26313,7 @@ screen and (max-height: 300px) {
         display: none;
     }
 }
+
 /* swiper-slide button positioning */
 .button-explore{
     position: absolute;
@@ -26375,3 +26387,4 @@ screen and (max-height: 300px) {
         left: 27%;
     }
 }
+

index.html

@@ -121,6 +121,9 @@ <h3 id="hh"></h3>
             <!-- ////////////////////////////////////////////////////////////// -->
         </header>
         <!-- Swiper-->
+        <div id="cursor"></div>
+        <div id="cursor-blur"></div>
+
         <section class="section swiper-container swiper-slider swiper-slider-corporate swiper-pagination-style-2" data-loop="true" data-autoplay="5000" data-simulate-touch="true" data-nav="false" data-direction="vertical">
             <div class="swiper-wrapper text-left">
                 <div class="swiper-slide context-dark" data-slide-bg="images/italy-517522957.jpg">

js/script.js

@@ -1,4 +1,19 @@
 "use strict";
+
+var crsr = document.querySelector("#cursor");
+var blur = document.querySelector("#cursor-blur");
+
+document.addEventListener("mousemove", function (dets) {
+  crsr.style.left = dets.x + "px";
+  crsr.style.top = dets.y + "px";
+  blur.style.left = dets.x - 250 + "px";
+  blur.style.top = dets.y - 250 + "px";
+});
+
+
+
+
+
 (function () {
 	// Global variables
 	var userAgent = navigator.userAgent.toLowerCase(),