Added Cursor Animation

Anishkagupta04 · Jul 9, 2024 · 21a253b · 21a253b
1 parent bca670d
commit 21a253b
Show file tree

Hide file tree

Showing 12 changed files with 873 additions and 0 deletions.
diff --git a/appointment.html b/appointment.html
@@ -115,6 +115,48 @@
                 padding: 8px;
             }
         }
+
+        .cursor{
+    z-index: 999;
+    background: rgb(11, 173, 198);
+    position: fixed;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    pointer-events: none;
+    box-shadow: 0 0 20px rgb(11, 173, 198),
+                0 0 60px rgb(11, 173, 198),
+                0 0 100px rgb(11, 173, 198);
+
+    animation: colors 5s infinite; 
+    transform: translate(-50%,-50%);           
+
+
+}
+
+@keyframes colors {
+    0%{
+       filter: hue-rotate(0deg);
+    }
+
+}
+
+.cursor:before{
+    size: 100px;
+    content: '';
+    position: absolute;
+    background: rgb(11, 173, 198);
+    width: 50px;
+    height: 50px;
+    opacity: 0.2;
+    transform: translate(-30%,-30%);
+    border-radius: 50%;
+
+}
+
     </style>
 </head>
 <body>
@@ -172,6 +214,7 @@
 
     <button type="submit">Make an Appointment</button>
 </form>
+<div class="cursor"></div>
 
 <script>
     document.getElementById('appointmentForm').addEventListener('submit', function(event) {
@@ -184,6 +227,34 @@
             document.getElementById('appointmentForm').reset();
         }, 500); // Simulate a delay for form submission
     });
+    const cursor = document.querySelector(".cursor");
+
+//follow cursor on mouse move
+document.addEventListener("mousemove",(e)=>{
+    let x = e.pageX;
+    let y = e.pageY;
+
+    cursor.style.top = y + "px";
+    cursor.style.left =x + "px";
+    cursor.style.display ="block";
+
+    //cursor effects on mouse stopped
+    function mouseStopped(){
+        cursor.style.display="none";
+
+    }
+    clearTimeout(timeout);
+    timeout = setTimeout(mouseStopped,1000);
+
+
+});
+
+//cursor effect on mouseout
+
+document.addEventListener("mouseout",()=>{
+    cursor.style.display="none";
+
+});
 </script>
 
 </body>

diff --git a/aptmnt.html b/aptmnt.html
@@ -115,6 +115,48 @@
                 padding: 8px;
             }
         }
+
+        .cursor{
+    z-index: 999;
+    background: rgb(11, 173, 198);
+    position: fixed;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    pointer-events: none;
+    box-shadow: 0 0 20px rgb(11, 173, 198),
+                0 0 60px rgb(11, 173, 198),
+                0 0 100px rgb(11, 173, 198);
+
+    animation: colors 5s infinite; 
+    transform: translate(-50%,-50%);           
+
+
+}
+
+@keyframes colors {
+    0%{
+       filter: hue-rotate(0deg);
+    }
+
+}
+
+.cursor:before{
+    size: 100px;
+    content: '';
+    position: absolute;
+    background: rgb(11, 173, 198);
+    width: 50px;
+    height: 50px;
+    opacity: 0.2;
+    transform: translate(-30%,-30%);
+    border-radius: 50%;
+
+}
+
     </style>
 </head>
 <body>
@@ -173,6 +215,37 @@
 
     <button type="submit">Make an Appointment</button>
 </form>
+<div class="cursor"></div>
+<script>
+    const cursor = document.querySelector(".cursor");
+
+//follow cursor on mouse move
+document.addEventListener("mousemove",(e)=>{
+    let x = e.pageX;
+    let y = e.pageY;
+
+    cursor.style.top = y + "px";
+    cursor.style.left =x + "px";
+    cursor.style.display ="block";
+
+    //cursor effects on mouse stopped
+    function mouseStopped(){
+        cursor.style.display="none";
+
+    }
+    clearTimeout(timeout);
+    timeout = setTimeout(mouseStopped,1000);
+
+
+});
+
+//cursor effect on mouseout
+
+document.addEventListener("mouseout",()=>{
+    cursor.style.display="none";
+
+});
+</script>
 
 </body>
 </html>
diff --git a/dex.html b/dex.html
@@ -22,6 +22,47 @@
       background-color: #3fbcc0;
       z-index: 9999;
     }
+    .cursor{
+    z-index: 999;
+    background: rgb(11, 173, 198);
+    position: fixed;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    pointer-events: none;
+    box-shadow: 0 0 20px rgb(11, 173, 198),
+                0 0 60px rgb(11, 173, 198),
+                0 0 100px rgb(11, 173, 198);
+
+    animation: colors 5s infinite; 
+    transform: translate(-50%,-50%);           
+
+
+}
+
+@keyframes colors {
+    0%{
+       filter: hue-rotate(0deg);
+    }
+
+}
+
+.cursor:before{
+    size: 100px;
+    content: '';
+    position: absolute;
+    background: rgb(11, 173, 198);
+    width: 50px;
+    height: 50px;
+    opacity: 0.2;
+    transform: translate(-30%,-30%);
+    border-radius: 50%;
+
+}
+
         </style>
     </head>
     <body>
@@ -236,13 +277,42 @@ <h3 class="footer__title">Follow us</h3>
 
             <p class="footer__copy">&#169; Talo. All right reserved</p>
         </footer>
+        <div class="cursor"></div>
 
         <!--=============== SCROLL UP ===============-->
         <a href="#" class="scrollup" id="scroll-up">
             <i class='bx bx-up-arrow-alt scrollup__icon'></i>
         </a>
 
         <!--=============== MAIN JS ===============-->
+        <script>const cursor = document.querySelector(".cursor");
+
+            //follow cursor on mouse move
+            document.addEventListener("mousemove",(e)=>{
+                let x = e.pageX;
+                let y = e.pageY;
+
+                cursor.style.top = y + "px";
+                cursor.style.left =x + "px";
+                cursor.style.display ="block";
+
+                //cursor effects on mouse stopped
+                function mouseStopped(){
+                    cursor.style.display="none";
+
+                }
+                clearTimeout(timeout);
+                timeout = setTimeout(mouseStopped,1000);
+
+
+            });
+
+            //cursor effect on mouseout
+
+            document.addEventListener("mouseout",()=>{
+                cursor.style.display="none";
+
+            });</script>
         <script src="assets/js/main.js"></script>
     </body>
 </html>
diff --git a/faq.html b/faq.html
@@ -117,6 +117,48 @@
       z-index: 9999;
     }
 
+    .cursor{
+    z-index: 999;
+    background: rgb(11, 173, 198);
+    position: fixed;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    pointer-events: none;
+    box-shadow: 0 0 20px rgb(11, 173, 198),
+                0 0 60px rgb(11, 173, 198),
+                0 0 100px rgb(11, 173, 198);
+
+    animation: colors 5s infinite; 
+    transform: translate(-50%,-50%);           
+
+
+}
+
+@keyframes colors {
+    0%{
+       filter: hue-rotate(0deg);
+    }
+
+}
+
+.cursor:before{
+    size: 100px;
+    content: '';
+    position: absolute;
+    background: rgb(11, 173, 198);
+    width: 50px;
+    height: 50px;
+    opacity: 0.2;
+    transform: translate(-30%,-30%);
+    border-radius: 50%;
+
+}
+
+
 </style>
 <body>
 
@@ -341,6 +383,7 @@ <h4>RAPIDOC Newsletter</h4><br>
       </svg>
     </div>
   </div>
+  <div class="cursor"></div>
 
   <!-- footer -->
 
@@ -380,6 +423,34 @@ <h4>RAPIDOC Newsletter</h4><br>
     }
   }
 });
+const cursor = document.querySelector(".cursor");
+
+//follow cursor on mouse move
+document.addEventListener("mousemove",(e)=>{
+    let x = e.pageX;
+    let y = e.pageY;
+
+    cursor.style.top = y + "px";
+    cursor.style.left =x + "px";
+    cursor.style.display ="block";
+
+    //cursor effects on mouse stopped
+    function mouseStopped(){
+        cursor.style.display="none";
+
+    }
+    clearTimeout(timeout);
+    timeout = setTimeout(mouseStopped,1000);
+
+
+});
+
+//cursor effect on mouseout
+
+document.addEventListener("mouseout",()=>{
+    cursor.style.display="none";
+
+});
 </script>
 </body>
 </html>