chore: enhance Advanced Parallax Container with new features and performance improvements

- Updated the parallax block to version 1.0.8, introducing new attributes for visibility trigger, detection boundary, and mouse interaction settings.
- Added support for advanced effects configuration, allowing users to customize depth levels, z-index, and mouse sensitivity.
- Implemented utility functions for parallax calculations and improved rendering logic for better performance and user experience.
- Introduced a debug panel and overlays for enhanced visibility and interaction tracking during development.

Author: TheAggressive

src/blocks-interactivity/parallax/attributes.ts

@@ -72,6 +72,24 @@ addFilter(
           attributes.aggressiveApparelParallax.delay.toString() + 'ms',
         '--parallax-easing': attributes.aggressiveApparelParallax.easing,
       };
+
+      // Save effects data for all blocks inside parallax containers
+      // Apply effects to any element that has parallax effects configured
+      if (attributes.aggressiveApparelParallax?.effects) {
+        const effects = attributes.aggressiveApparelParallax.effects;
+
+        // Check if any effects are configured (including default values for layering control)
+        const hasAnyEffects =
+          effects.zoom ||
+          effects.depthLevel ||
+          effects.zIndex ||
+          effects.opacity ||
+          effects.rotation;
+
+        if (hasAnyEffects) {
+          extraProps['data-parallax-effects'] = JSON.stringify(effects);
+        }
+      }
     }
 
     return extraProps;

src/blocks-interactivity/parallax/block.json

@@ -2,7 +2,7 @@
   "$schema": "https://schemas.wp.org/trunk/block.json",
   "apiVersion": 3,
   "name": "aggressive-apparel/parallax",
-  "version": "1.0.5",
+  "version": "1.0.8",
   "title": "Advanced Parallax Container",
   "category": "widgets",
   "icon": "cover-image",
@@ -21,26 +21,62 @@
       "type": "number",
       "default": 50
     },
-    "enableIntersectionObserver": {
-      "type": "boolean",
-      "default": true
-    },
-    "intersectionThreshold": {
+    "visibilityTrigger": {
       "type": "number",
-      "default": 0.1
+      "default": 0.3
+    },
+    "detectionBoundary": {
+      "type": "object",
+      "default": {
+        "top": "0%",
+        "right": "0%",
+        "bottom": "0%",
+        "left": "0%"
+      }
     },
     "enableMouseInteraction": {
       "type": "boolean",
       "default": false
     },
+    "debugMode": {
+      "type": "boolean",
+      "default": false
+    },
     "parallaxDirection": {
       "type": "string",
-      "enum": ["up", "down", "both"],
       "default": "down"
     },
-    "debugMode": {
-      "type": "boolean",
-      "default": false
+    "mouseInfluenceMultiplier": {
+      "type": "number",
+      "default": 0.5
+    },
+    "maxMouseTranslation": {
+      "type": "number",
+      "default": 20
+    },
+    "mouseSensitivityThreshold": {
+      "type": "number",
+      "default": 0.001
+    },
+    "depthIntensityMultiplier": {
+      "type": "number",
+      "default": 50
+    },
+    "transitionDuration": {
+      "type": "number",
+      "default": 0.1
+    },
+    "perspectiveDistance": {
+      "type": "number",
+      "default": 1000
+    },
+    "maxMouseRotation": {
+      "type": "number",
+      "default": 5
+    },
+    "parallaxDepth": {
+      "type": "number",
+      "default": 1.0
     }
   },
   "providesContext": {

…c/blocks-interactivity/parallax/utils.ts …s-interactivity/parallax/calculations.tssrc/blocks-interactivity/parallax/utils.ts renamed to src/blocks-interactivity/parallax/calculations.ts src/blocks-interactivity/parallax/utils.ts renamed to src/blocks-interactivity/parallax/calculations.ts

@@ -34,67 +34,66 @@ export function calculateParallaxMovement(
   scrollProgress: number,
   intensity: number,
   speed: number,
-  direction: 'up' | 'down' | 'both' | 'none',
-  mouseX?: number,
-  mouseY?: number,
-  enableMouseInteraction?: boolean
+  direction: string,
+  mouseX: number,
+  mouseY: number,
+  enableMouseInteraction: boolean,
+  options: {
+    mouseInfluenceMultiplier: number;
+    maxMouseTranslation: number;
+    depthFactor: number;
+  }
 ): { x: number; y: number } {
-  const adjustedIntensity = intensity / 100;
-
-  // Initialize movement values
-  let scrollMovementY = 0;
-  let mouseMovementY = 0;
-  let mouseMovementX = 0;
+  // Scroll movement
+  let scrollX = 0;
+  let scrollY = 0;
+  const movement = scrollProgress * intensity * speed;
 
-  // Calculate scroll-based movement (primarily affects Y axis)
   switch (direction) {
     case 'up':
-      scrollMovementY = -scrollProgress * 100 * adjustedIntensity * speed;
+      scrollY = -movement;
       break;
     case 'down':
-      scrollMovementY = scrollProgress * 100 * adjustedIntensity * speed;
+      scrollY = movement;
       break;
-    case 'both': {
-      const centeredProgress = (scrollProgress - 0.5) * 2;
-      scrollMovementY = centeredProgress * 100 * adjustedIntensity * speed;
+    case 'left':
+      scrollX = -movement;
+      break;
+    case 'right':
+      scrollX = movement;
+      break;
+    case 'both':
+      scrollX = movement * 0.5;
+      scrollY = movement * 0.5;
       break;
-    }
-    case 'none':
-    default:
-      scrollMovementY = 0;
   }
 
-  // Add mouse interaction if enabled (affects both X and Y axes for 3D effect)
-  if (enableMouseInteraction && mouseX !== undefined && mouseY !== undefined) {
-    // Mouse influence: convert mouse position to movement offset
-    // mouseX and mouseY are normalized 0-1, convert to -1 to 1 range
-    const mouseOffsetX = (mouseX - 0.5) * 2; // -1 to 1
-    const mouseOffsetY = (mouseY - 0.5) * 2; // -1 to 1
-
-    // Apply mouse influence based on direction
-    switch (direction) {
-      case 'up':
-      case 'down':
-        // Mouse creates subtle 3D movement: horizontal mouse affects horizontal parallax
-        mouseMovementX = mouseOffsetX * 30 * adjustedIntensity * speed;
-        mouseMovementY = mouseOffsetY * 50 * adjustedIntensity * speed;
-        break;
-      case 'both':
-        // Full 3D mouse parallax effect
-        mouseMovementX = mouseOffsetX * 40 * adjustedIntensity * speed;
-        mouseMovementY = mouseOffsetY * 40 * adjustedIntensity * speed;
-        break;
-      case 'none':
-      default:
-        mouseMovementX = 0;
-        mouseMovementY = 0;
-    }
+  // Mouse movement
+  let mouseXTrans = 0;
+  let mouseYTrans = 0;
+
+  if (enableMouseInteraction) {
+    const { mouseInfluenceMultiplier, maxMouseTranslation, depthFactor } =
+      options;
+    const mouseInfluence = mouseInfluenceMultiplier * intensity * depthFactor;
+
+    mouseXTrans = (mouseX - 0.5) * mouseInfluence * speed;
+    mouseYTrans = (mouseY - 0.5) * mouseInfluence * speed;
+
+    // Clamp
+    mouseXTrans = Math.max(
+      -maxMouseTranslation,
+      Math.min(maxMouseTranslation, mouseXTrans)
+    );
+    mouseYTrans = Math.max(
+      -maxMouseTranslation,
+      Math.min(maxMouseTranslation, mouseYTrans)
+    );
   }
 
-  // Combine scroll and mouse movement (mouse has less influence)
   return {
-    x: mouseMovementX * 0.3, // Mouse X influence
-    y: scrollMovementY + mouseMovementY * 0.3, // Scroll Y + Mouse Y influence
+    x: scrollX + mouseXTrans,
+    y: scrollY + mouseYTrans,
   };
 }
 
@@ -136,14 +135,17 @@ export function getElementStableId(
   return `${blockType}-${index}`;
 }
 
+/**
+ * Debounces a function call.
+ */
 /**
  * Debounces a function call.
  */
 export function debounce<T extends Function>(func: T, wait: number): Function {
   let timeout: number;
   return (...args: any[]) => {
     clearTimeout(timeout);
-    timeout = setTimeout(() => func(...args), wait);
+    timeout = window.setTimeout(() => func(...args), wait);
   };
 }
 
@@ -156,7 +158,7 @@ export function throttle<T extends Function>(func: T, limit: number): Function {
     if (!inThrottle) {
       func(...args);
       inThrottle = true;
-      setTimeout(() => (inThrottle = false), limit);
+      window.setTimeout(() => (inThrottle = false), limit);
     }
   };
 }