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 @@ ...@@ -12,8 +12,20 @@
font-family: 'Times New Roman', Times, serif; font-family: 'Times New Roman', Times, serif;
scroll-behavior: smooth; 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 { .content-block {
height: 100vh; min-height: 100vh;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
...@@ -39,64 +51,68 @@ ...@@ -39,64 +51,68 @@
</style> </style>
</head> </head>
<body> <body>
{% include 'menu.html' %} <div id="menu">
{% include 'menu.html' %}
</div>
<div class="content-block" id="block1"> <div class="content-wrapper">
<div class="content"> <div class="content-block" id="block1">
<div class="image"> <div class="content">
<img src="https://static.igem.wiki/teams/5187/art/logo.png" alt="Logo"> <div class="image">
</div> <img src="https://static.igem.wiki/teams/5187/art/logo.png" alt="Logo">
<div class="text"> </div>
<h2>Welcome to Tsinghua - IGEM 2024</h2> <div class="text">
<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> <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>
</div>
<div class="content-block" id="block2"> <div class="content-block" id="block2">
<div class="content"> <div class="content">
<div class="image"> <div class="image">
<img src="https://static.igem.wiki/teams/5187/art/logo.png" alt="Logo"> <img src="https://static.igem.wiki/teams/5187/art/logo.png" alt="Logo">
</div> </div>
<div class="text"> <div class="text">
<h2>Our Mission</h2> <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> <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>
</div>
<div class="content-block" id="block3"> <div class="content-block" id="block3">
<div class="content"> <div class="content">
<div class="image"> <div class="image">
<img src="https://static.igem.wiki/teams/5187/art/logo.png" alt="Logo"> <img src="https://static.igem.wiki/teams/5187/art/logo.png" alt="Logo">
</div> </div>
<div class="text"> <div class="text">
<h2>Our Team</h2> <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> <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>
</div>
<div class="content-block" id="block4"> <div class="content-block" id="block4">
<div class="content"> <div class="content">
<div class="image"> <div class="image">
<img src="https://static.igem.wiki/teams/5187/art/logo.png" alt="Logo"> <img src="https://static.igem.wiki/teams/5187/art/logo.png" alt="Logo">
</div> </div>
<div class="text"> <div class="text">
<h2>Our Projects</h2> <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> <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>
</div>
<div class="content-block" id="block5"> <div class="content-block" id="block5">
<div class="content"> <div class="content">
<div class="image"> <div class="image">
<img src="https://static.igem.wiki/teams/5187/art/logo.png" alt="Logo"> <img src="https://static.igem.wiki/teams/5187/art/logo.png" alt="Logo">
</div> </div>
<div class="text"> <div class="text">
<h2>Contact Us</h2> <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> <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>
</div> </div>
...@@ -105,7 +121,24 @@ ...@@ -105,7 +121,24 @@
<script> <script>
const blocks = document.querySelectorAll('.content-block'); const blocks = document.querySelectorAll('.content-block');
const menu = document.getElementById('menu');
const colors = ['#FFFFFF', '#FF5151']; 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() { function updateColors() {
const scrollPosition = window.scrollY; const scrollPosition = window.scrollY;
...@@ -114,29 +147,35 @@ ...@@ -114,29 +147,35 @@
blocks.forEach((block, index) => { blocks.forEach((block, index) => {
const blockTop = block.offsetTop; const blockTop = block.offsetTop;
const blockHeight = block.offsetHeight; const blockHeight = block.offsetHeight;
const blockCenter = blockTop + blockHeight / 2; const blockProgress = (scrollPosition + windowHeight / 2 - blockTop) / blockHeight;
if (scrollPosition + windowHeight / 2 > blockCenter) { if (blockProgress >= 0 && blockProgress <= 1) {
// Odd blocks (1, 3, 5) are white background with pink text const startColor = index % 2 === 0 ? colors[0] : colors[1];
// Even blocks (2, 4) are pink background with white text const endColor = index % 2 === 0 ? colors[1] : colors[0];
if (index % 2 === 0) {
block.style.backgroundColor = colors[0]; const backgroundColor = interpolateColor(startColor, endColor, blockProgress);
block.style.color = colors[1]; const textColor = interpolateColor(endColor, startColor, blockProgress);
} else {
block.style.backgroundColor = colors[1]; block.style.backgroundColor = backgroundColor;
block.style.color = colors[0]; block.style.color = textColor;
}
} 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 = '';
}
} }
}); });
// 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); 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