Update file home.html

wiki/pages/home.html

@@ -303,7 +303,6 @@
     </div>
   </div>
 
-
   <!-- Add the sine wave container and sachet image container -->
   <div id="sine-wave-container">
     <svg id="sine-wave-animation" xmlns="http://www.w3.org/2000/svg"></svg>
@@ -312,7 +311,6 @@
     <img src="https://static.igem.wiki/teams/5187/art/icon.png" alt="Sachet" id="sachet-image">
   </div>
 
-
   <footer class="footer">
     <div class="footer-content">
       <div class="social-icons">
@@ -369,83 +367,95 @@
   });
 
   // Added JavaScript for sine wave animation
-  window.addEventListener('DOMContentLoaded', function() {
+  window.addEventListener('load', function() {
     const svg = document.getElementById('sine-wave-animation');
     const sachetImage = document.getElementById('sachet-image');
 
-    // Get the sachet image height
-    const sachetHeight = sachetImage.offsetHeight || 0;
-
-    const width = 100; // Width of the SVG
-    const height = window.innerHeight - sachetHeight; // Height from top to sachet
-
-    svg.setAttribute('width', width);
-    svg.setAttribute('height', height);
-
-    // Parameters for sine waves
-    const amplitudes = [20, 15, 10]; // Amplitude of each sine wave
-    const frequencies = [5, 7, 9]; // Number of cycles for each sine wave
-    const offsets = [30, 50, 70]; // Horizontal positions
-    const colors = ['pink', 'pink', 'pink']; // Color of the sine waves
-
-    const paths = [];
-
-    for (let i = 0; i < 3; i++) {
-      const pathData = createVerticalSineWavePath(
-        amplitudes[i],
-        frequencies[i],
-        0,
-        offsets[i],
-        width,
-        height,
-        500
-      );
-      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-      path.setAttribute('d', pathData);
-      path.setAttribute('stroke', colors[i]);
-      path.setAttribute('fill', 'none');
-      path.setAttribute('stroke-width', 2);
-      path.setAttribute('id', 'sinewave' + i);
-
-      svg.appendChild(path);
-
-      // Get the length of the path
-      const length = path.getTotalLength();
-
-      // Set up the stroke-dasharray and stroke-dashoffset
-      path.style.strokeDasharray = length;
-      path.style.strokeDashoffset = length;
-
-      paths.push({path: path, length: length});
-    }
-
-    function createVerticalSineWavePath(amplitude, frequency, phase, horizontalOffset, width, height, points) {
-      let path = "";
-      for (let i = 0; i <= points; i++) {
-        let y = (i / points) * height;
-        let x = amplitude * Math.sin(frequency * (y / height) * 2 * Math.PI + phase) + horizontalOffset;
-        if (i === 0) {
-          path += "M " + x + " " + y + " ";
-        } else {
-          path += "L " + x + " " + y + " ";
+    // Ensure the sachet image has loaded
+    sachetImage.onload = function() {
+      initializeSineWave();
+    };
+
+    // If the image is cached and already loaded
+    if (sachetImage.complete) {
+      initializeSineWave();
+    }
+
+    function initializeSineWave() {
+      // Get the sachet image height
+      const sachetHeight = sachetImage.offsetHeight || 0;
+
+      const width = 100; // Width of the SVG
+      const height = window.innerHeight - sachetHeight - 50; // Height from top to sachet
+
+      svg.setAttribute('width', width);
+      svg.setAttribute('height', height);
+
+      // Parameters for sine waves
+      const amplitudes = [20, 15, 10]; // Amplitude of each sine wave
+      const frequencies = [5, 7, 9]; // Number of cycles for each sine wave
+      const offsets = [50, 50, 50]; // Horizontal positions
+      const colors = ['pink', 'pink', 'pink']; // Color of the sine waves
+
+      const paths = [];
+
+      for (let i = 0; i < 3; i++) {
+        const pathData = createVerticalSineWavePath(
+          amplitudes[i],
+          frequencies[i],
+          0,
+          offsets[i],
+          width,
+          height,
+          500
+        );
+        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        path.setAttribute('d', pathData);
+        path.setAttribute('stroke', colors[i]);
+        path.setAttribute('fill', 'none');
+        path.setAttribute('stroke-width', 2);
+        path.setAttribute('id', 'sinewave' + i);
+
+        svg.appendChild(path);
+
+        // Get the length of the path
+        const length = path.getTotalLength();
+
+        // Set up the stroke-dasharray and stroke-dashoffset
+        path.style.strokeDasharray = length;
+        path.style.strokeDashoffset = length;
+
+        paths.push({path: path, length: length});
+      }
+
+      function createVerticalSineWavePath(amplitude, frequency, phase, horizontalOffset, width, height, points) {
+        let path = "";
+        for (let i = 0; i <= points; i++) {
+          let y = (i / points) * height;
+          let x = amplitude * Math.sin(frequency * (y / height) * 2 * Math.PI + phase) + horizontalOffset;
+          if (i === 0) {
+            path += "M " + x + " " + y + " ";
+          } else {
+            path += "L " + x + " " + y + " ";
+          }
         }
+        return path;
       }
-      return path;
-    }
 
-    window.addEventListener('scroll', function() {
-      const scrollTop = window.scrollY || window.pageYOffset;
-      const scrollHeight = document.body.scrollHeight - window.innerHeight;
+      window.addEventListener('scroll', function() {
+        const scrollTop = window.scrollY || window.pageYOffset;
+        const scrollHeight = document.body.scrollHeight - window.innerHeight;
 
-      // Calculate the scroll percentage
-      const scrollPercent = scrollTop / scrollHeight;
+        // Calculate the scroll percentage
+        const scrollPercent = scrollTop / scrollHeight;
 
-      // For each path, adjust the stroke-dashoffset
-      paths.forEach(function(item) {
-        const drawLength = item.length * scrollPercent;
-        item.path.style.strokeDashoffset = item.length - drawLength;
+        // For each path, adjust the stroke-dashoffset
+        paths.forEach(function(item) {
+          const drawLength = item.length * scrollPercent;
+          item.path.style.strokeDashoffset = item.length - drawLength;
+        });
       });
-    });
+    }
   });
 </script>
 </html>
\ No newline at end of file