Update file home.html

wiki/pages/home.html

@@ -169,30 +169,32 @@
             height: 150px;
         }
 
-        .line-container {
+        #wave-container {
             position: fixed;
-            bottom: 120px; /* Adjust based on sachet size */
-            right: 20px;
-            width: 150px; /* Adjust based on desired width */
-            height: 300px; /* Adjust based on desired height */
+            top: 0;
+            right: 0;
+            width: 100px;
+            height: 100%;
+            z-index: 1000;
             pointer-events: none;
-            z-index: 1;
         }
-        .line {
-            fill: none;
-            stroke: pink;
-            stroke-linecap: round;
-            stroke-dasharray: 1000;
-            stroke-dashoffset: 1000;
-            transition: stroke-width 0.3s ease;
+        .wave {
+            position: absolute;
+            right: 0;
+            width: 3px;
+            height: 0;
+            background-color: pink;
+            transition: height 0.5s ease;
         }
         #sachet {
             position: fixed;
             bottom: 20px;
             right: 20px;
-            width: 100px;
-            height: 100px;
-            z-index: 2;
+            width: 60px;
+            height: 60px;
+            background-image: url('https://static.igem.wiki/teams/5187/art/icon.png');
+            background-size: cover;
+            z-index: 1001;
         }
   </style>
 </head>
@@ -202,15 +204,12 @@
     <img src="https://static.igem.wiki/teams/5187/art/loading.gif" alt="Loading" class="loader-gif">
 </div>
 
-<div class="line-container">
-  <svg width="100%" height="100%" preserveAspectRatio="none">
-      <path class="line" id="line1" d=""/>
-      <path class="line" id="line2" d=""/>
-      <path class="line" id="line3" d=""/>
-  </svg>
+<div id="wave-container">
+  <div class="wave" id="wave1"></div>
+  <div class="wave" id="wave2"></div>
+  <div class="wave" id="wave3"></div>
 </div>
-
-<img id="sachet" src="https://static.igem.wiki/teams/5187/art/icon.png" alt="Sachet">
+<div id="sachet"></div>
 
 <!-- Existing content -->
 <div id="menu">
@@ -364,7 +363,7 @@
 
 
 <script>
-  
+
     window.addEventListener('load', function() {
   const loaderContainer = document.querySelector('.loader-container');
   setTimeout(function() {
@@ -376,48 +375,66 @@
   }, 2000); // Hide after 2 seconds (adjust as needed)
 });
 
-  const lines = document.querySelectorAll('.line');
-  const lineContainer = document.querySelector('.line-container');
+const waves = document.querySelectorAll('.wave');
+        const sachet = document.getElementById('sachet');
+        const waveContainer = document.getElementById('wave-container');
+        let lastScrollTop = 0;
+        let animationFrame;
 
-  function createSinePath(startX, amplitude, frequency, containerHeight) {
-      let path = `M${startX},${containerHeight} `;
-      for (let y = containerHeight; y >= 0; y -= 5) {
-          const x = startX + Math.sin((containerHeight - y) * frequency) * amplitude;
-          path += `L${x},${y} `;
-      }
-      return path;
-  }
+        function createSineWave(amplitude, frequency, phase) {
+            return (x) => amplitude * Math.sin(frequency * x + phase);
+        }
+
+        const wave1 = createSineWave(10, 0.1, 0);
+        const wave2 = createSineWave(8, 0.12, Math.PI / 3);
+        const wave3 = createSineWave(6, 0.14, Math.PI / 6);
 
-  function updateLines() {
-      const scrollPercentage = window.scrollY / (document.documentElement.scrollHeight - window.innerHeight);
-      const containerHeight = lineContainer.clientHeight;
-      const containerWidth = lineContainer.clientWidth;
+        function updateWaves() {
+            const scrollPercentage = window.scrollY / (document.documentElement.scrollHeight - window.innerHeight);
+            const waveHeight = Math.min(window.innerHeight * scrollPercentage, window.innerHeight - sachet.offsetHeight);
 
-      lines.forEach((line, index) => {
-          const startX = (index + 1) * containerWidth / 4;
-          const amplitude = 15;
-          const frequency = 0.05;
-          let path = createSinePath(startX, amplitude, frequency, containerHeight);
+            waves.forEach((wave, index) => {
+                wave.style.height = `${waveHeight}px`;
+                const waveFunction = [wave1, wave2, wave3][index];
+                const curve = [...Array(Math.ceil(waveHeight))].map((_, i) => 
+                    `${90 + waveFunction(i / 5)}px ${i}px`
+                ).join(',');
+                wave.style.clipPath = `polygon(${curve}, 100px ${waveHeight}px, 100px 0)`;
+            });
 
-          line.setAttribute('d', path);
-          line.style.strokeDashoffset = 1000 - (scrollPercentage * 1000);
-          
-          // Animate stroke width
-          const baseWidth = 2;
-          const maxWidth = 6;
-          const widthDiff = maxWidth - baseWidth;
-          line.style.strokeWidth = baseWidth + (scrollPercentage * widthDiff);
-      });
-  }
+            if (waveHeight >= window.innerHeight - sachet.offsetHeight) {
+                waves.forEach(wave => {
+                    wave.style.transition = 'none';
+                    wave.style.height = '100%';
+                    const sachetTop = sachet.getBoundingClientRect().top;
+                    wave.style.clipPath = `polygon(90px 0, 90px ${sachetTop}px, 100px ${sachetTop + 30}px, 100px 100%)`;
+                });
+            } else {
+                waves.forEach(wave => {
+                    wave.style.transition = 'height 0.5s ease';
+                });
+            }
+        }
+
+        function onScroll() {
+            const st = window.pageYOffset || document.documentElement.scrollTop;
+            if (st > lastScrollTop) {
+                // Scrolling down
+                if (animationFrame) cancelAnimationFrame(animationFrame);
+                animationFrame = requestAnimationFrame(updateWaves);
+            } else {
+                // Scrolling up
+                waves.forEach(wave => {
+                    wave.style.height = '0';
+                    wave.style.clipPath = 'none';
+                });
+            }
+            lastScrollTop = st <= 0 ? 0 : st;
+        }
 
-  function animateLines() {
-      updateLines();
-      requestAnimationFrame(animateLines);
-  }
+        window.addEventListener('scroll', onScroll);
+        window.addEventListener('resize', updateWaves);
 
-  window.addEventListener('resize', updateLines);
-  window.addEventListener('scroll', updateLines);
-  animateLines();
 
 </script>
 </html>