From 22896a9ef5650ed6b54be23e54ab32e2b0f854c6 Mon Sep 17 00:00:00 2001
From: HouTeng Chan <ht-chen21@mails.tsinghua.edu.cn>
Date: Mon, 30 Sep 2024 04:52:12 +0000
Subject: [PATCH] Update file home.html
---
wiki/pages/home.html | 150 +++++++++++++++++++++++--------------------
1 file changed, 80 insertions(+), 70 deletions(-)
diff --git a/wiki/pages/home.html b/wiki/pages/home.html
index e4cadfc6..e36859e6 100644
--- a/wiki/pages/home.html
+++ b/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
--
GitLab