[gssoc'23] - Custom Javascript Cursor Scroll //GSAP (pranjay-poddar#1907

) * [GSSOC'23] custom javascript cursor 😎 * [GSSOC'23] Custom javascript cursor hover
raghav1482 · Jun 11, 2023 · d1bea3d · d1bea3d
1 parent f77ed0d
commit d1bea3d
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 0 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/README.md b/README.md
@@ -717,9 +717,17 @@ Happy Coding! -->
 <td align="center"> 227.</td>
 <td align="center"> <a href="https://github.com/pranjay-poddar/Dev-Geeks/tree/main/Python%20Projects/Text%20Editor"> Text Editor in Python </a></td>
 <td align="center"> 228.</td>
+
+<td align="center"> <a href="https://github.com/pranjay-poddar/Dev-Geeks/tree/main/Frontend-Projects/FIght%20Game"> Fight Game </a></td>
+<td align="center"> 229.</td>
+<td align="center"> <a href="https://github.com/pranjay-poddar/Dev-Geeks/pull/1907/commits/40e3f712bf926b9e6b5d8bff0a5d5cee8e123fdc"> custom javascript cursor </a></td>
+
+</tr>
+
 <td align="center"> <a href="https://github.com/pranjay-poddar/Dev-Geeks/tree/main/ReactJS%20Typescript%20Projects/typescript_todo"> Typescript React Todos </a></td>
 
 
+
 <tr align="center">
 <td align="center"> 229.</td>
 <td align="center"> 230.</td>

diff --git a/custom cursor hover -javascript/index.html b/custom cursor hover -javascript/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>custom cursor</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <ul>
+            <li><a href="#">Only</a></li>
+            <li><a href="#">easy</a></li>
+            <li><a href="#"> day</a></li>
+            <li><a href="#">was</a></li>
+            <li><a href="#">Yesterday !</a></li>
+            <div class="cursor"></div>
+        </ul>
+    </div>
+
+</body>
+<script src="script.js"></script>
+</html> 
diff --git a/custom cursor hover -javascript/script.js b/custom cursor hover -javascript/script.js
@@ -0,0 +1,5 @@
+const cursor = document.querySelector('.cursor');
+document.addEventListener('mousemove', (e)=>{
+    cursor.style.left = e.pageX + 'px';
+    cursor.style.top = e.pageY + 'px';
+});
diff --git a/custom cursor hover -javascript/style.css b/custom cursor hover -javascript/style.css
@@ -0,0 +1,50 @@
+@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');
+*{
+    margin: 0;
+    padding: 0;
+
+}
+body{
+    background: linear-gradient(to right, #0f0c29, #302b63, #24243e);
+    cursor: none;
+}
+.container{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100vh;
+
+}
+.container ul{
+    list-style: none;
+    display: flex;
+
+}
+.container ul li{
+    margin: 0px 20px;
+}
+.container ul li a{
+    text-decoration: none;
+    color: white;
+    font-family: 'Abril Fatface', cursive;
+    font-size: 30px;
+    text-transform: uppercase;
+
+}
+.cursor{
+    position: fixed;
+    top: 0;
+    left: 0;
+    transform: translate(-50%,-50%);
+    background-color: white;
+    mix-blend-mode: difference;
+    transition: 0.1s;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    pointer-events: none;
+}
+ul li:hover ~ .cursor{
+    transform: scale(6);
+}