Level2 added a trailer

prajjwal000 · Feb 11, 2024 · 44e3325 · 44e3325
1 parent 30308c7
commit 44e3325
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -2,14 +2,16 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Bloby site</title>
     <script src="https://cdn.jsdelivr.net/npm/kute.js@2.1.2/dist/kute.min.js"></script>
-    <link rel="stylesheet" href="style.css">
   </head>
 
   <body>
+
+      <script type="module" src="main.js"></script>
+
+      <div id="trailer"></div>
     <section>
       <div class="blob-content">
         <h1>Nice curves</h1>

diff --git a/main.js b/main.js
@@ -1 +1,9 @@
 import './style.css'
+
+const trailer = document.getElementById("trailer");
+
+window.onmousemove = e => {
+    const x = e.clientX - trailer.offsetWidth/2,
+          y = e.clientY - trailer.offsetHeight/2;
+    trailer.style.transform = `translate(${x}px, ${y}px)`;
+}
diff --git a/style.css b/style.css
@@ -1,3 +1,18 @@
+#trailer {
+    height:20px;
+    width:20px;
+    background-color: aqua;
+    border-radius:20px;
+
+    position:fixed;
+    left:0px;
+    top:0px;
+    z-index:10;
+    pointer-events:none;
+
+    opacity:0;
+    transition:opacity 500ms ease;
+}
 h1 {
     font-size: 4rem;
 }
@@ -30,3 +45,6 @@ section {
     z-index: 0;
     transform: translateY(-45%);
 }
+body:hover > #trailer {
+    opacity:1;
+}