Add Pulsating Custom Cursor (#1359)

Praneeth-2602 · web-flow · commit 8b902cea4bbe · 2024-08-10T19:29:28.000+05:30
diff --git a/Components/Cursors/Pulsating-Custom-Cursor/index.html b/Components/Cursors/Pulsating-Custom-Cursor/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <p>This is a <a href="#">Pulsating Custom Cursor</a></p>
+    <div class="cursor"></div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Components/Cursors/Pulsating-Custom-Cursor/script.js b/Components/Cursors/Pulsating-Custom-Cursor/script.js
@@ -0,0 +1,13 @@
+const cursor = document.querySelector('.cursor');
+
+document.addEventListener('mousemove', e => {
+    cursor.setAttribute("style", "top: "+(e.pageY - 10)+"px; left: "+(e.pageX - 10)+"px;")
+})
+
+document.addEventListener('click', () => {
+    cursor.classList.add("expand");
+
+    setTimeout(() => {
+        cursor.classList.remove("expand");
+    }, 500)
+})
diff --git a/Components/Cursors/Pulsating-Custom-Cursor/style.css b/Components/Cursors/Pulsating-Custom-Cursor/style.css
@@ -0,0 +1,83 @@
+body {
+    margin: 0;
+    height: 100vh;
+    /* cursor: none; */
+    background: rgb(27, 27, 27);
+}
+
+.cursor {
+    width: 20px;
+    height: 20px;
+    border: 1px solid white;
+    border-radius: 50%;
+    position: absolute;
+    transition-duration: 200ms;
+    transition-timing-function: ease-out;
+    animation: cursorAnim .5s infinite alternate;
+    pointer-events: none;
+}
+
+.cursor::after {
+    content: "";
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    border: 8px solid gray;
+    border-radius: 50%;
+    opacity: .5;
+    top: -8px;
+    left: -8px;
+    animation: cursorAnim2 .5s infinite alternate;
+}
+
+@keyframes cursorAnim {
+    from {
+        transform: scale(1);
+    }
+
+    to {
+        transform: scale(.7);
+    }
+}
+
+@keyframes cursorAnim2 {
+    from {
+        transform: scale(1);
+    }
+
+    to {
+        transform: scale(.4);
+    }
+}
+
+@keyframes cursorAnim3 {
+    0% {
+        transform: scale(1);
+    }
+
+    50% {
+        transform: scale(3);
+    }
+
+    100% {
+        transform: scale(1);
+        opacity: 0;
+    }
+}
+
+.expand {
+    animation: cursorAnim3 .5s forwards;
+    border: 1px solid red;
+}
+
+p {
+    color: white;
+    font-family: 'arial';
+    text-align: center;
+    margin-top: 50px;
+    font-size: 1.4em;
+
+    a {
+        color: teal;
+    }
+}
diff --git a/assets/html_files/cursors.html b/assets/html_files/cursors.html
@@ -148,6 +148,19 @@ <h1>Dynamic Element Tracker</h1>
                     </a>
                 </div>
             </div>
+            <div class="box">
+                <h1>Pulsating Custom Cursor</h1>
+                <div class="preview">
+                    <a href="../../Components/Cursors/Pulsating-Custom-Cursor/index.html" title="Live Preview" target="_blank">
+                        <img src="../images/link.png">
+                    </a>
+                </div>
+                <div class="source">
+                    <a href="https://github.com/Rakesh9100/Beautiify/tree/main/Components/Cursors/Pulsating-Custom-Cursor" title="Source Code" target="_blank">
+                        <img src="../images/github.png">
+                    </a>
+                </div>
+            </div>
         </div>
     </section>
 
