Skip to content
Snippets Groups Projects
Commit e5382126 authored by HouTeng Chan's avatar HouTeng Chan
Browse files

Update file home.html

parent 7f138066
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 106 additions and 67 deletions
wiki/pages/home.html
+ 106
− 67
View file @ e5382126
......@@ -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);
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment