@widelab-nc/widehue 1.0.36 → 1.0.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widelab-nc/widehue",
-  "version": "1.0.36",
+  "version": "1.0.37",
   "description": "Widelab starter template based on Finsweet template + add-ons.",
   "homepage": "https://widelab.co",
   "license": "ISC",

package/src/index.js

@@ -1296,6 +1296,136 @@ window.animationTest3 = function(root) {
     });
   });
 };
+
+
+window.animationTest4 = function(root) {
+  const hoverWrappers = root.querySelectorAll('.hover-wrapper');
+  const hoverMasks = root.querySelectorAll('.hover-mask');
+  const hoverTitles = root.querySelectorAll('.hover-title');
+
+  // Stałe rozmiary bg-video
+  const VIDEO_WIDTH = 380;
+  const VIDEO_HEIGHT = 280;
+  const VISIBLE_RATIO = 0.7;
+
+  // Ukryj wszystkie maski na starcie
+  hoverMasks.forEach(mask => {
+    mask.style.display = 'none';
+    mask.style.position = 'fixed';
+    mask.style.top = '0';
+    mask.style.left = '0';
+    mask.style.width = '100vw';
+    mask.style.height = '100vh';
+    mask.style.zIndex = '999';
+    mask.style.pointerEvents = 'none'; // nie blokuje hovera
+  });
+
+  function resetOpacity() {
+    hoverTitles.forEach(title => {
+      title.style.opacity = '';
+    });
+  }
+
+  function resetBgVideos(mask) {
+    const videos = mask.querySelectorAll('.bg-video');
+    videos.forEach(video => {
+      video.style.display = 'none';
+      video.style.left = '';
+      video.style.top = '';
+      video.style.position = '';
+    });
+  }
+
+  function placeElementAtRandomVisiblePosition(el, container) {
+    const containerWidth = container.offsetWidth;
+    const containerHeight = container.offsetHeight;
+
+    const minVisibleWidth = VIDEO_WIDTH * VISIBLE_RATIO;
+    const minVisibleHeight = VIDEO_HEIGHT * VISIBLE_RATIO;
+
+    const maxLeft = containerWidth - minVisibleWidth;
+    const maxTop = containerHeight - minVisibleHeight;
+
+    let left = Math.random() * maxLeft;
+    let top = Math.random() * maxTop;
+
+    if (left + VIDEO_WIDTH > containerWidth) left = containerWidth - VIDEO_WIDTH;
+    if (top + VIDEO_HEIGHT > containerHeight) top = containerHeight - VIDEO_HEIGHT;
+
+    el.style.left = `${left}px`;
+    el.style.top = `${top}px`;
+    el.style.position = 'absolute';
+    el.style.width = `${VIDEO_WIDTH}px`;
+    el.style.height = `${VIDEO_HEIGHT}px`;
+    el.style.zIndex = '1001';
+    el.style.pointerEvents = 'none';
+  }
+
+  hoverWrappers.forEach((wrapper, index) => {
+    const title = hoverTitles[index];
+    const mask = hoverMasks[index];
+    const videos = mask.querySelectorAll('.bg-video');
+    let videoTimeline = null;
+    let isActive = false;
+
+    videos.forEach(video => {
+      video.style.display = 'none';
+      video.style.width = `${VIDEO_WIDTH}px`;
+      video.style.height = `${VIDEO_HEIGHT}px`;
+      video.style.position = 'absolute';
+      video.style.zIndex = '1001';
+      video.style.pointerEvents = 'none';
+    });
+
+    wrapper.addEventListener('mouseenter', () => {
+      if (isActive) return;
+      isActive = true;
+
+      resetBgVideos(mask);
+      mask.style.display = 'block';
+
+      hoverTitles.forEach((t, i) => {
+        t.style.opacity = i === index ? '1' : '0.2';
+      });
+
+      videoTimeline = gsap.timeline();
+
+      videos.forEach((video, i) => {
+        videoTimeline.add(() => {
+          placeElementAtRandomVisiblePosition(video, mask);
+        }, i);
+
+        videoTimeline.to(video, {
+          display: 'block',
+          duration: 0
+        }, i);
+      });
+
+      videoTimeline.play();
+    });
+
+    wrapper.addEventListener('mouseleave', () => {
+      isActive = false;
+
+      if (videoTimeline) {
+        videoTimeline.kill();
+        videoTimeline = null;
+      }
+
+      mask.style.display = 'none';
+      resetBgVideos(mask);
+
+      setTimeout(() => {
+        const anyHovered = Array.from(hoverWrappers).some(el => el.matches(':hover'));
+        if (!anyHovered) resetOpacity();
+      }, 0);
+    });
+  });
+};
+
+
+
+
 window.pricingInteraction = function(e) {
   // Check if the screen width is 992px or wider
   if (window.innerWidth >= 992) {