Update index.html

index.html

@@ -110,10 +110,11 @@
             top: 1%;
             right: 1%;
             z-index: 15;
-            opacity: 0.9;
+            opacity: 0;
             width: 12%;
             pointer-events: none;
             transition: opacity 0.3s ease;
+            clip-path: inset(0 0 0 0);
         }
         .watermark img {
             width: 100%;
@@ -219,12 +220,35 @@
             const sliderPosition = Math.max(0, Math.min(offsetX, rect.width));
             slider.style.left = `${sliderPosition}px`;
             video2.style.clipPath = `inset(0 ${rect.width - sliderPosition}px 0 0)`;
+            
+            // Update watermark visibility - show when video1 area is visible
+            const watermark = document.querySelector('.watermark');
+            const watermarkRect = watermark.getBoundingClientRect();
+            const watermarkLeft = watermarkRect.left - container.getBoundingClientRect().left;
+            
+            if (sliderPosition > watermarkLeft) {
+                watermark.style.opacity = '0';
+            } else {
+                watermark.style.opacity = '0.9';
+            }
         }
 
         function updateClipPath() {
             const rect = container.getBoundingClientRect();
             const sliderPosition = parseFloat(window.getComputedStyle(slider).left);
             video2.style.clipPath = `inset(0 ${rect.width - sliderPosition}px 0 0)`;
+            
+            // Update watermark visibility during animation
+            const watermark = document.querySelector('.watermark');
+            const watermarkRect = watermark.getBoundingClientRect();
+            const watermarkLeft = watermarkRect.left - rect.left;
+            
+            if (sliderPosition > watermarkLeft) {
+                watermark.style.opacity = '0';
+            } else {
+                watermark.style.opacity = '0.9';
+            }
+            
             requestAnimationFrame(updateClipPath);
         }