Update README.md

README.md

@@ -19,9 +19,10 @@ tags:
 <style>
 .parallax-container {
     position: relative;
-    overflow: hidden;
+    overflow: visible;
     height: 120px;
     margin: 20px 0;
+    perspective: 100px;
 }
 
 .text-layer {
@@ -31,18 +32,21 @@ tags:
     font-family: 'Arial Black', 'Helvetica', sans-serif;
     font-size: 72px;
     font-weight: bold;
-    transition: transform 0.1s ease-out;
+    white-space: nowrap;
+    will-change: transform;
 }
 
 .text-base {
     color: #ff71ce;
     text-shadow: 2px 2px 0 #ff00ff;
+    z-index: 1;
 }
 
 .text-overlay {
     color: #01cdfe;
     text-shadow: -2px -2px 0 #00ffff;
     opacity: 0.8;
+    z-index: 2;
 }
 
 .sigma {
@@ -51,29 +55,9 @@ tags:
         2px 2px 0 #ff00ff,
         -2px -2px 0 #00ffff;
 }
-
-.subtitle {
-    font-family: 'Arial', sans-serif;
-    font-size: 24px;
-    text-align: center;
-    color: #00ffff;
-    margin-top: 10px;
-    text-shadow: 2px 2px 4px rgba(0, 255, 255, 0.5);
-}
-
-@keyframes glow {
-    from {
-        filter: drop-shadow(0 0 2px #ff00ff) 
-                drop-shadow(0 0 4px #ff00ff);
-    }
-    to {
-        filter: drop-shadow(0 0 4px #ff00ff) 
-                drop-shadow(0 0 8px #ff00ff);
-    }
-}
 </style>
 
-<div class="parallax-container">
+<div class="parallax-container" id="parallax">
     <div class="text-layer text-base">
         Proteus<span class="sigma">Σ</span>
     </div>
@@ -83,31 +67,20 @@ tags:
 </div>
 
 <script>
-document.addEventListener('scroll', function() {
-    const scrolled = window.pageYOffset || document.documentElement.scrollTop;
-    const overlay = document.querySelector('.text-overlay');
-    const base = document.querySelector('.text-base');
-    
-    // Create parallax effect
-    const moveX = scrolled * 0.1;
-    const moveY = scrolled * 0.05;
-    
-    overlay.style.transform = `translate(${moveX}px, ${moveY}px)`;
-    base.style.transform = `translate(${-moveX * 0.5}px, ${-moveY * 0.5}px)`;
-});
-
-// Add mouse movement effect
-document.addEventListener('mousemove', function(e) {
-    const overlay = document.querySelector('.text-overlay');
-    const base = document.querySelector('.text-base');
-    
-    const moveX = (e.clientX - window.innerWidth/2) * 0.01;
-    const moveY = (e.clientY - window.innerHeight/2) * 0.01;
-    
-    overlay.style.transform = `translate(${moveX}px, ${moveY}px)`;
-    base.style.transform = `translate(${-moveX * 0.5}px, ${-moveY * 0.5}px)`;
+const parallax = document.getElementById('parallax');
+const textBase = parallax.querySelector('.text-base');
+const textOverlay = parallax.querySelector('.text-overlay');
+
+window.addEventListener('scroll', () => {
+    requestAnimationFrame(() => {
+        const scrolled = window.pageYOffset;
+        const baseOffset = scrolled * -0.2;
+        const overlayOffset = scrolled * 0.2;
+        
+        textBase.style.transform = `translateY(${baseOffset}px)`;
+        textOverlay.style.transform = `translateY(${overlayOffset}px)`;
+    });
 });
-</script>
 
 
 ## Example Outputs