Add Gyannetra website files

js/tech-marquee.js

@@ -0,0 +1,97 @@
+// Tech Marquee Animation Enhancement
+document.addEventListener('DOMContentLoaded', function() {
+    const techMarqueeContents = document.querySelectorAll('.tech-marquee-content');
+    const techItems = document.querySelectorAll('.tech-marquee-item');
+    
+    // Adjust animation speed for each marquee
+    techMarqueeContents.forEach((marquee, index) => {
+        const isReversed = marquee.classList.contains('tech-marquee-content-reversed');
+        const marqueeItems = marquee.querySelectorAll('.tech-marquee-item');
+        const itemCount = marqueeItems.length / 2; // Account for duplicated items
+        
+        // Set slightly different speeds for each marquee
+        const baseSpeed = isReversed ? 65 : 60;
+        const animationDuration = Math.max(30, Math.min(70, itemCount * 5)); // Between 30s and 70s
+        marquee.style.animationDuration = `${baseSpeed + (index * 10)}s`;
+    });
+    
+    // Add 3D tilt effect on mouse move for each tech icon
+    techItems.forEach(item => {
+        const iconContainer = item.querySelector('.tech-icon-container');
+        
+        if (iconContainer) {
+            item.addEventListener('mousemove', function(e) {
+                const rect = iconContainer.getBoundingClientRect();
+                const x = e.clientX - rect.left;
+                const y = e.clientY - rect.top;
+                
+                const centerX = rect.width / 2;
+                const centerY = rect.height / 2;
+                
+                const tiltX = (centerX - x) / 10;
+                const tiltY = (y - centerY) / 10;
+                
+                iconContainer.style.transform = `perspective(500px) rotateX(${tiltY}deg) rotateY(${-tiltX}deg) scale3d(1.05, 1.05, 1.05)`;
+            });
+            
+            item.addEventListener('mouseleave', function() {
+                iconContainer.style.transform = '';
+            });
+        }
+    });
+    
+    // Function to add pulse effect to random icons in a marquee
+    function addPulseEffects() {
+        // Get all tech marquees
+        const marquees = document.querySelectorAll('.tech-marquee-container');
+        
+        marquees.forEach(marquee => {
+            // Get all items in this marquee
+            const marqueeItems = marquee.querySelectorAll('.tech-marquee-item');
+            
+            // Select 1-2 random items to pulse
+            const numberOfPulses = Math.floor(Math.random() * 2) + 1;
+            
+            for (let i = 0; i < numberOfPulses; i++) {
+                const randomIndex = Math.floor(Math.random() * marqueeItems.length);
+                const randomItem = marqueeItems[randomIndex];
+                const iconContainer = randomItem.querySelector('.tech-icon-container');
+                
+                if (iconContainer && !iconContainer.classList.contains('tech-pulse-highlight')) {
+                    iconContainer.classList.add('tech-pulse-highlight');
+                    
+                    setTimeout(() => {
+                        iconContainer.classList.remove('tech-pulse-highlight');
+                    }, 2000);
+                }
+            }
+        });
+    }
+    
+    // Add subtle pulse effects periodically
+    setInterval(addPulseEffects, 3000);
+      // Add a parallax effect to create depth between the two marquees
+    window.addEventListener('mousemove', function(e) {
+        const containers = document.querySelectorAll('.tech-marquee-container');
+        
+        containers.forEach((container, index) => {
+            const isReversed = container.classList.contains('tech-marquee-reversed');
+            const depth = isReversed ? 25 : 15; // Reduced sensitivity due to full width
+            const moveX = (e.clientX - window.innerWidth / 2) / depth;
+            const moveY = (e.clientY - window.innerHeight / 2) / depth;
+            
+            // Limit the movement for a subtler effect with the full-width design
+            const maxMove = 10;
+            const limitedMoveX = Math.max(-maxMove, Math.min(maxMove, moveX));
+            const limitedMoveY = Math.max(-maxMove, Math.min(maxMove, moveY));
+            
+            container.style.transform = `translate(${limitedMoveX}px, ${limitedMoveY}px)`;
+        });
+    });
+    
+    // Add entrance animation for each tech item
+    const allMarquees = document.querySelectorAll('.tech-marquee-container');
+    allMarquees.forEach((marquee, marqueeIndex) => {
+        marquee.style.animationDelay = `${marqueeIndex * 0.2}s`;
+    });
+});