Optimize animation performance: parallax scroll and image compression (#6)

- Replace JPG images with WebP format for better compression
- Optimize parallax implementation with GPU-accelerated transforms
- Use translate3d() and integer pixel values to eliminate jitter
- Add continuous RAF loop for smoother scroll tracking
- Restore fade-out opacity effect during parallax scroll
- Reduce cloud layers from 3 to 2 for better performance
- Add backface-visibility hidden for GPU compositing
- Cache hero height with debounced resize handler

Author: jubalm

public/images/cloud-1.jpg

@@ -20,11 +20,11 @@
     height: 100%;
     width: 200vw;
     background-repeat: repeat-x;
-    background-size: 100vw 100%; /* Each tile = viewport width */
-    mix-blend-mode: overlay;
+    background-size: contain; /* Each tile = viewport width */
+    /*mix-blend-mode: overlay;*/
     will-change: transform;
     transform: translateZ(0);
-    opacity: 0.3;
+    opacity: 0.5;
   }
 
   .animate-fog-slow {
@@ -47,9 +47,9 @@
 
 <div class="absolute inset-0 w-full h-full pointer-events-none overflow-hidden">
   <!-- Cloud Layer 1 - Slow -->
-  <div class="fog-layer animate-fog-slow bg-[url('/images/cloud-1.jpg')]"></div>
+  <div class="fog-layer animate-fog-slow bg-[url('/images/cloud-1.webp')]"></div>
   <!-- Cloud Layer 2 - Fast -->
-  <div class="fog-layer fog-layer-fast animate-fog-fast bg-[url('/images/cloud-2.jpg')]"></div>
+  <!-- <div class="fog-layer fog-layer-fast animate-fog-fast bg-[url('/images/cloud-2.jpg')]"></div> -->
   <!-- Cloud Layer 3 - Medium -->
-  <div class="fog-layer fog-layer-medium animate-fog-medium bg-[url('/images/cloud-1.jpg')]"></div>
+  <div class="fog-layer fog-layer-medium animate-fog-medium bg-[url('/images/cloud-2.webp')]"></div>
 </div>

public/images/cloud-1.webp

@@ -6,17 +6,11 @@ import AnimatedGrid from './AnimatedGrid.astro';
 
 <div class="fixed inset-0 z-0">
   <!-- Background Image: Pink Mountain Dawn -->
-  <div class="absolute inset-0 bg-[url('/images/mountain-ranges.jpg')] bg-cover bg-center"></div>
+  <div class="absolute inset-0 bg-[url('/images/mountain-ranges.webp')] bg-cover bg-center"></div>
 
   <!-- Animated Cloud Layers -->
   <AnimatedClouds />
 
-  <!-- Gradient Overlay for Contrast -->
-  <div class="absolute inset-0 bg-linear-to-b from-[#795364] via-[#594848]/60 to-[#321824]/50 mix-blend-multiply"></div>
-
-  <!-- Noise Texture for film grain feel - using CSS grain effect instead of SVG filter -->
-  <div class="absolute inset-0 w-full h-full pointer-events-none" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22100%22 height=%22100%22><filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%22.5%22 numOctaves=%221%22 stitchTiles=%22stitch%22/></filter><rect width=%22100%22 height=%22100%22 filter=%22url(%23n)%22 opacity=%22.05%22/></svg>'); opacity: 0.05;"></div>
-
   <!-- Golden Ratio Grid Overlay -->
   <AnimatedGrid />
 </div>

public/images/cloud-2.jpg

@@ -98,11 +98,13 @@ import RotatingCoil from './RotatingCoil.astro';
     animation-delay: 0.3s;
   }
 
-  /* Parallax layers */
+  /* Parallax layers - optimized for GPU compositing */
   .hero-coil,
   .hero-content,
   .hero-scroll {
     will-change: transform;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
   }
 
   /* Reduced Motion */
@@ -120,6 +122,7 @@ import RotatingCoil from './RotatingCoil.astro';
     .hero-content,
     .hero-scroll {
       will-change: auto;
+      transform: none !important;
     }
   }
 </style>
@@ -223,7 +226,7 @@ import RotatingCoil from './RotatingCoil.astro';
   }
 
   function initParallax() {
-    const hero = document.querySelector('header.relative.min-h-screen') as HTMLElement;
+    const hero = document.querySelector('header#hero') as HTMLElement;
     if (!hero) return;
 
     const coil = hero.querySelector('.hero-coil') as HTMLElement;
@@ -233,54 +236,110 @@ import RotatingCoil from './RotatingCoil.astro';
     // Check for reduced motion preference
     if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
 
-    let ticking = false;
+    // Cache heroHeight
+    let heroHeight = hero.offsetHeight;
+
+    // Update on resize with debounce
+    let resizeTimeout: number;
+    window.addEventListener('resize', () => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = window.setTimeout(() => {
+        heroHeight = hero.offsetHeight;
+      }, 100);
+    }, { passive: true });
+
+    let isScrolling = false;
+    let lastScrollY = window.scrollY;
 
     function updateParallax() {
-      const scrollY = window.scrollY;
-      const heroHeight = hero.offsetHeight;
+      if (!isScrolling) return;
 
-      // Only apply parallax when hero is in view
-      if (scrollY < heroHeight) {
-        // Calculate fade-out opacity (starts fading at 20% scroll, fully faded at 60%)
-        const fadeStart = heroHeight * 0.2;
-        const fadeEnd = heroHeight * 0.6;
-        const opacity = Math.max(0, Math.min(1, 1 - (scrollY - fadeStart) / (fadeEnd - fadeStart)));
+      const scrollY = window.scrollY;
 
-        // Coil moves slower (0.3x scroll speed) - feels further back
+      // Early exit when off-screen
+      if (scrollY >= heroHeight) {
         if (coil) {
-          coil.style.transform = `translateY(${scrollY * 0.3}px)`;
-          coil.style.opacity = String(opacity);
+          coil.style.transform = 'translate3d(0, 0, 0)';
+          coil.style.opacity = '0';
         }
-
-        // Content moves faster (0.6x scroll speed) - feels closer
         if (content) {
-          content.style.transform = `translateY(${scrollY * 0.6}px)`;
-          content.style.opacity = String(opacity);
+          content.style.transform = 'translate3d(0, 0, 0)';
+          content.style.opacity = '0';
         }
-
-        // Scroll indicator fades out faster
         if (scrollIndicator) {
-          const scrollIndicatorOpacity = Math.max(0, 1 - scrollY / (heroHeight * 0.3));
-          scrollIndicator.style.transform = `translateY(${scrollY * 0.5}px)`;
-          scrollIndicator.style.opacity = String(scrollIndicatorOpacity);
+          scrollIndicator.style.transform = 'translate3d(0, 0, 0)';
+          scrollIndicator.style.opacity = '0';
         }
+        isScrolling = false;
+        return;
+      }
+
+      // Calculate scroll progress (0 to 1)
+      const scrollProgress = scrollY / heroHeight;
+
+      // Use integer pixel values to avoid sub-pixel rendering
+      const coilY = Math.round(scrollY * 0.3);
+      const contentY = Math.round(scrollY * 0.6);
+      const scrollY_val = Math.round(scrollY * 0.5);
+
+      // Calculate fade-out opacity (starts fading at 20% scroll, fully faded at 60%)
+      const fadeStart = 0.2;
+      const fadeEnd = 0.6;
+      const opacity = Math.max(0, Math.min(1, 1 - (scrollProgress - fadeStart) / (fadeEnd - fadeStart)));
+
+      // Scroll indicator fades faster (fully faded at 30%)
+      const scrollIndicatorOpacity = Math.max(0, 1 - scrollProgress / 0.3);
+
+      // Update transforms and opacity
+      if (coil) {
+        coil.style.transform = `translate3d(0, ${coilY}px, 0)`;
+        coil.style.opacity = String(opacity);
+      }
+      if (content) {
+        content.style.transform = `translate3d(0, ${contentY}px, 0)`;
+        content.style.opacity = String(opacity);
       }
+      if (scrollIndicator) {
+        scrollIndicator.style.transform = `translate3d(0, ${scrollY_val}px, 0)`;
+        scrollIndicator.style.opacity = String(scrollIndicatorOpacity);
+      }
+
+      lastScrollY = scrollY;
 
-      ticking = false;
+      // Continue loop while scrolling
+      if (isScrolling) {
+        requestAnimationFrame(updateParallax);
+      }
     }
 
     function onScroll() {
-      if (!ticking) {
+      if (!isScrolling) {
+        isScrolling = true;
         requestAnimationFrame(updateParallax);
-        ticking = true;
       }
     }
 
-    window.addEventListener('scroll', onScroll, { passive: true });
+    // Stop scrolling flag after scroll ends
+    let scrollTimeout: number;
+    function onScrollEnd() {
+      clearTimeout(scrollTimeout);
+      scrollTimeout = window.setTimeout(() => {
+        isScrolling = false;
+      }, 50);
+    }
+
+    // Initial call
+    updateParallax();
+
+    window.addEventListener('scroll', () => {
+      onScroll();
+      onScrollEnd();
+    }, { passive: true });
 
-    // Cleanup on page transition
+    // Cleanup
     document.addEventListener('astro:before-swap', () => {
       window.removeEventListener('scroll', onScroll);
+      clearTimeout(scrollTimeout);
     }, { once: true });
   }