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

Update file home.html

parent dd17ab8e
No related branches found
No related tags found
No related merge requests found
Pipeline #419865 passed
Stage: build
Stage: deploy
Hide whitespace changes
Inline Side-by-side
Showing
with 24 additions and 23 deletions
wiki/pages/home.html
+ 24
− 23
View file @ 7f138066
......@@ -40,6 +40,7 @@
</head>
<body>
{% include 'menu.html' %}
<div class="content-block" id="block1">
<div class="content">
<div class="image">
......@@ -99,6 +100,7 @@
</div>
</div>
</div>
{% include 'footer.html' %}
<script>
......@@ -111,33 +113,32 @@
blocks.forEach((block, index) => {
const blockTop = block.offsetTop;
const blockBottom = blockTop + block.offsetHeight;
const progress = (scrollPosition - blockTop + windowHeight / 2) / windowHeight;
if (progress >= 0 && progress <= 1) {
const startColor = index % 2 === 0 ? colors[0] : colors[1];
const endColor = index % 2 === 0 ? colors[1] : colors[0];
const backgroundColor = interpolateColor(startColor, endColor, progress);
const textColor = interpolateColor(endColor, startColor, progress);
block.style.backgroundColor = backgroundColor;
block.style.color = textColor;
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 = '';
}
}
});
}
function interpolateColor(color1, color2, factor) {
const result = color1.slice(1).match(/.{2}/g).map((hex, i) => {
const start = parseInt(hex, 16);
const end = parseInt(color2.slice(1).match(/.{2}/g)[i], 16);
const interpolated = Math.round(start + (end - start) * factor);
return interpolated.toString(16).padStart(2, '0');
}).join('');
return `#${result}`;
}
window.addEventListener('scroll', updateColors);
window.addEventListener('resize', updateColors);
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