From 835e916221728ec24073a495cffc78b357f5fa7c Mon Sep 17 00:00:00 2001
From: HauErn Lien <lienhe81@gmail.com>
Date: Tue, 1 Oct 2024 19:50:39 +0000
Subject: [PATCH] Update file random.html
---
wiki/pages/random.html | 39 +++++++++++++++++++++++++++++++++++++++
1 file changed, 39 insertions(+)
diff --git a/wiki/pages/random.html b/wiki/pages/random.html
index 00df26f4..ec3a53bf 100644
--- a/wiki/pages/random.html
+++ b/wiki/pages/random.html
@@ -31,6 +31,28 @@
background-position: 90% center;
background-repeat: no-repeat;
}
+
+ .section {
+ height: 100vh; /* Full viewport height */
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 2em;
+ transition: background-color 0.5s ease; /* Smooth transition */
+ }
+ #section1 {
+ background-image: url('https://static.igem.wiki/teams/5187/ran-1.jpg');
+ background-attachment: fixed;
+ background-size: cover;
+ background-position: 90% center;
+ background-repeat: no-repeat;
+ }
+ #section2 {
+ background-color: lightcoral;
+ }
+ #section3 {
+ background-color: lightgreen;
+ }
.content-wrapper {
display: flex;
@@ -157,6 +179,11 @@
<p>Everyone gets sick from time to time, often returning to their normal routines within days. But what if you're an IBD patient? Can life ever truly feel normal again? While IBD may not be fatal, it can gradually consume every facet of your existence. With constant hospital visits, unpredictable cramps, and the toll of immune attacks, you find yourself living—but not truly alive.</p>
</div>
+ <div class="section" id="section1">Section 1</div>
+ <div class="section" id="section2">Section 2</div>
+ <div class="section" id="section3">Section 3</div>
+
+
<div class="card-container">
<div class="card">
<div class="card-content">
@@ -223,6 +250,18 @@
this.classList.toggle('expanded');
});
});
+
+ window.addEventListener('scroll', () => {
+ const sections = document.querySelectorAll('.section');
+ let scrollPosition = window.scrollY; // Current scroll position
+
+ sections.forEach((section) => {
+ if (scrollPosition >= section.offsetTop && scrollPosition < section.offsetTop + section.offsetHeight) {
+ // Change the body's background color based on the current section
+ document.body.style.backgroundColor = getComputedStyle(section).backgroundColor;
+ }
+ });
+ })
</script>
</body>
</html>
\ No newline at end of file
--
GitLab