Merge pull request #71 from Darshan-SD/main

d-coder111 · web-flow · commit db4a8ef9cab4 · 2024-10-09T19:47:37.000+05:30
Cursor replaced with Magic Wand
diff --git a/assests/images/wand.png b/assests/images/wand.png
diff --git a/index.html b/index.html
@@ -16,6 +16,7 @@
 </head>
 
 <body>
+  <img src="./assests/images/wand.png" class="custom-cursor" id="wandCursor" alt="Magic Wand">
   <div class="relative w-full h-screen overflow-hidden">
     <div class="light-sweep"></div>
     <audio id="submitSound" src="protego-105518.mp3" preload="auto"></audio>
diff --git a/script.js b/script.js
@@ -409,4 +409,67 @@ document.addEventListener('DOMContentLoaded', function() {
     backgroundSound.play();
     backgroundSound.loop = true;
   });
-});
+});
+
+
+// Get the wand cursor
+const wandCursor = document.getElementById('wandCursor');
+let lastMouseX = 0;
+let lastMouseY = 0;
+
+function wandPositionAnimation(x, y) {
+  createSparkle(x, y);
+  wandCursor.style.left = `${x}px`;
+  wandCursor.style.top = `${y}px`;
+}
+
+document.addEventListener('mousemove', function (e) {
+  lastMouseX = e.clientX;
+  lastMouseY = e.clientY;
+  wandPositionAnimation(e.pageX, e.pageY)
+});
+
+document.addEventListener('scroll', function (e) {
+  const scrollX = window.scrollX;
+  const scrollY = window.scrollY;
+  const absoluteX = lastMouseX + scrollX;
+  const absoluteY = lastMouseY + scrollY;
+  wandPositionAnimation(absoluteX, absoluteY)
+});
+
+function addRotation() {
+  wandCursor.style.transform = 'rotate(45deg)';
+  wandCursor.style.transformOrigin = '50% 0%';
+}
+
+function removeRotation() {
+  wandCursor.style.transform = 'translate(-25%, -25%)';
+}
+
+// Elements to hover over (button, label, etc.)
+const hoverElements = ['button', '.question label', '#generateSpellBtn'];
+
+// Add event listeners to the elements
+hoverElements.forEach(hoverElement => {
+  var elements = document.querySelectorAll(hoverElement);
+  elements.forEach(element => {
+    element.addEventListener('mouseenter', addRotation);  
+    element.addEventListener('mouseleave', removeRotation); 
+  })
+});
+
+// Function to create sparkles at the given position
+function createSparkle(x, y) {
+  const sparkle = document.createElement('div');
+  sparkle.className = 'sparkle';
+  document.body.appendChild(sparkle);
+
+  const offsetX = (Math.random() - 0.5) * 40; 
+  const offsetY = (Math.random() - 0.5) * 40;
+  sparkle.style.left = `${x + offsetX}px`;
+  sparkle.style.top = `${y + offsetY}px`;
+
+  setTimeout(() => {
+    sparkle.remove();
+  }, 500);
+}
diff --git a/styles.css b/styles.css
@@ -1,9 +1,53 @@
+* {
+  cursor: none !important;
+}
+
 body {
   font-family: "Arial", sans-serif;
   background: radial-gradient(circle at center, #1b1f3b, #0a0c22, #000000);
   margin: 0;
 }
 
+.custom-cursor {
+  position: absolute;
+  pointer-events: none;
+  width: 60px;
+  /* Adjust the size of the wand */
+  height: 60px;
+  /* Adjust the size of the wand */
+  transform: translate(-25%, -25%);
+  transition: transform 0.1s ease-out;
+  z-index: 10000;
+}
+
+/* Sparkle particle style */
+.sparkle {
+  position: absolute;
+  width: 2.5px;
+  height: 2.5px;
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 50%;
+  pointer-events: none;
+  animation: sparkle-animation 0.8s ease-out forwards;
+  box-shadow: 0 0 10px 2px rgba(255, 157, 0, 0.5);
+  transition: all 0.2s;
+  z-index: 9999;
+}
+
+/* Sparkle particle animation */
+@keyframes sparkle-animation {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+
+
 .container {
   max-width: 1918px;
   padding: 20px;
