From e5382126391d6aaedc03d917a0a96134056fbf57 Mon Sep 17 00:00:00 2001
From: HouTeng Chan <ht-chen21@mails.tsinghua.edu.cn>
Date: Fri, 13 Sep 2024 05:41:33 +0000
Subject: [PATCH] Update file home.html
---
wiki/pages/home.html | 173 ++++++++++++++++++++++++++-----------------
1 file changed, 106 insertions(+), 67 deletions(-)
diff --git a/wiki/pages/home.html b/wiki/pages/home.html
index 53def31c..b1729ee6 100644
--- a/wiki/pages/home.html
+++ b/wiki/pages/home.html
@@ -12,8 +12,20 @@
font-family: 'Times New Roman', Times, serif;
scroll-behavior: smooth;
}
+ #menu {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ background-color: rgba(255, 255, 255, 0.9);
+ transition: transform 0.3s ease-in-out;
+ z-index: 1000;
+ }
+ .content-wrapper {
+ padding-top: 60px; /* Adjust based on your menu height */
+ }
.content-block {
- height: 100vh;
+ min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
@@ -39,64 +51,68 @@
</style>
</head>
<body>
- {% include 'menu.html' %}
+ <div id="menu">
+ {% include 'menu.html' %}
+ </div>
- <div class="content-block" id="block1">
- <div class="content">
- <div class="image">
- <img src="https://static.igem.wiki/teams/5187/art/logo.png" alt="Logo">
- </div>
- <div class="text">
- <h2>Welcome to Tsinghua - IGEM 2024</h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
+ <div class="content-wrapper">
+ <div class="content-block" id="block1">
+ <div class="content">
+ <div class="image">
+ <img src="https://static.igem.wiki/teams/5187/art/logo.png" alt="Logo">
+ </div>
+ <div class="text">
+ <h2>Welcome to Tsinghua - IGEM 2024</h2>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
+ </div>
</div>
</div>
- </div>
- <div class="content-block" id="block2">
- <div class="content">
- <div class="image">
- <img src="https://static.igem.wiki/teams/5187/art/logo.png" alt="Logo">
- </div>
- <div class="text">
- <h2>Our Mission</h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
+ <div class="content-block" id="block2">
+ <div class="content">
+ <div class="image">
+ <img src="https://static.igem.wiki/teams/5187/art/logo.png" alt="Logo">
+ </div>
+ <div class="text">
+ <h2>Our Mission</h2>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
+ </div>
</div>
</div>
- </div>
- <div class="content-block" id="block3">
- <div class="content">
- <div class="image">
- <img src="https://static.igem.wiki/teams/5187/art/logo.png" alt="Logo">
- </div>
- <div class="text">
- <h2>Our Team</h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
+ <div class="content-block" id="block3">
+ <div class="content">
+ <div class="image">
+ <img src="https://static.igem.wiki/teams/5187/art/logo.png" alt="Logo">
+ </div>
+ <div class="text">
+ <h2>Our Team</h2>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
+ </div>
</div>
</div>
- </div>
- <div class="content-block" id="block4">
- <div class="content">
- <div class="image">
- <img src="https://static.igem.wiki/teams/5187/art/logo.png" alt="Logo">
- </div>
- <div class="text">
- <h2>Our Projects</h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
+ <div class="content-block" id="block4">
+ <div class="content">
+ <div class="image">
+ <img src="https://static.igem.wiki/teams/5187/art/logo.png" alt="Logo">
+ </div>
+ <div class="text">
+ <h2>Our Projects</h2>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
+ </div>
</div>
</div>
- </div>
- <div class="content-block" id="block5">
- <div class="content">
- <div class="image">
- <img src="https://static.igem.wiki/teams/5187/art/logo.png" alt="Logo">
- </div>
- <div class="text">
- <h2>Contact Us</h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
+ <div class="content-block" id="block5">
+ <div class="content">
+ <div class="image">
+ <img src="https://static.igem.wiki/teams/5187/art/logo.png" alt="Logo">
+ </div>
+ <div class="text">
+ <h2>Contact Us</h2>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
+ </div>
</div>
</div>
</div>
@@ -105,7 +121,24 @@
<script>
const blocks = document.querySelectorAll('.content-block');
+ const menu = document.getElementById('menu');
const colors = ['#FFFFFF', '#FF5151'];
+ let lastScrollTop = 0;
+
+ function interpolateColor(color1, color2, factor) {
+ const r1 = parseInt(color1.slice(1, 3), 16);
+ const g1 = parseInt(color1.slice(3, 5), 16);
+ const b1 = parseInt(color1.slice(5, 7), 16);
+ const r2 = parseInt(color2.slice(1, 3), 16);
+ const g2 = parseInt(color2.slice(3, 5), 16);
+ const b2 = parseInt(color2.slice(5, 7), 16);
+
+ const r = Math.round(r1 + factor * (r2 - r1));
+ const g = Math.round(g1 + factor * (g2 - g1));
+ const b = Math.round(b1 + factor * (b2 - b1));
+
+ return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+ }
function updateColors() {
const scrollPosition = window.scrollY;
@@ -114,29 +147,35 @@
blocks.forEach((block, index) => {
const blockTop = block.offsetTop;
const blockHeight = block.offsetHeight;
- const blockCenter = blockTop + blockHeight / 2;
-
- if (scrollPosition + windowHeight / 2 > blockCenter) {
- // Odd blocks (1, 3, 5) are white background with pink text
- // Even blocks (2, 4) are pink background with white text
- if (index % 2 === 0) {
- block.style.backgroundColor = colors[0];
- block.style.color = colors[1];
- } else {
- block.style.backgroundColor = colors[1];
- block.style.color = colors[0];
- }
- } else {
- // Reset to initial state when block is not in view
- if (index === 0) {
- block.style.backgroundColor = colors[0];
- block.style.color = colors[1];
- } else {
- block.style.backgroundColor = '';
- block.style.color = '';
- }
+ const blockProgress = (scrollPosition + windowHeight / 2 - blockTop) / blockHeight;
+
+ if (blockProgress >= 0 && blockProgress <= 1) {
+ const startColor = index % 2 === 0 ? colors[0] : colors[1];
+ const endColor = index % 2 === 0 ? colors[1] : colors[0];
+
+ const backgroundColor = interpolateColor(startColor, endColor, blockProgress);
+ const textColor = interpolateColor(endColor, startColor, blockProgress);
+
+ block.style.backgroundColor = backgroundColor;
+ block.style.color = textColor;
}
});
+
+ // Menu fade effect
+ const menuHeight = menu.offsetHeight;
+ const fadeStart = 0;
+ const fadeEnd = menuHeight;
+ const opacity = 1 - Math.min(Math.max((scrollPosition - fadeStart) / (fadeEnd - fadeStart), 0), 1);
+ menu.style.opacity = opacity;
+
+ // Hide menu when scrolling down, show when scrolling up
+ const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
+ if (currentScrollTop > lastScrollTop) {
+ menu.style.transform = `translateY(-${menuHeight}px)`;
+ } else {
+ menu.style.transform = 'translateY(0)';
+ }
+ lastScrollTop = currentScrollTop <= 0 ? 0 : currentScrollTop;
}
window.addEventListener('scroll', updateColors);
--
GitLab