From d4f0f121f5155394c51ab1bf49a7d21a36685482 Mon Sep 17 00:00:00 2001
From: HouTeng Chan <ht-chen21@mails.tsinghua.edu.cn>
Date: Mon, 30 Sep 2024 04:41:39 +0000
Subject: [PATCH] Update file home.html
---
wiki/pages/home.html | 139 ++++++++++++++++++++++++-------------------
1 file changed, 78 insertions(+), 61 deletions(-)
diff --git a/wiki/pages/home.html b/wiki/pages/home.html
index ad92f015..a9a74e29 100644
--- a/wiki/pages/home.html
+++ b/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>
--
GitLab