From f6d1aa8491b6b60667a558be4c4a25a49965d46c Mon Sep 17 00:00:00 2001
From: HouTeng Chan <ht-chen21@mails.tsinghua.edu.cn>
Date: Mon, 30 Sep 2024 04:57:28 +0000
Subject: [PATCH] Update file home.html
---
wiki/pages/home.html | 51 ++++++++++++++++++++++++++++++++++++++++++--
1 file changed, 49 insertions(+), 2 deletions(-)
diff --git a/wiki/pages/home.html b/wiki/pages/home.html
index bcf067d3..14db9ece 100644
--- a/wiki/pages/home.html
+++ b/wiki/pages/home.html
@@ -167,7 +167,39 @@
width: 150px;
height: 150px;
}
-
+
+ .scroll-guide {
+ position: fixed;
+ bottom: 20px;
+ right: 20px;
+ width: 60px;
+ height: 100px;
+ background-image: url('https://static.igem.wiki/teams/5187/art/icon.png');
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center;
+ animation: float 2s ease-in-out infinite;
+ z-index: 1000;
+ }
+ .scroll-guide::after {
+ content: '';
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ width: 20px;
+ height: 20px;
+ background: radial-gradient(circle, rgba(144,238,144,0.8) 0%, rgba(144,238,144,0) 70%);
+ border-radius: 50%;
+ animation: release 2s ease-in-out infinite;
+ }
+ @keyframes float {
+ 0%, 100% { transform: translateY(0); }
+ 50% { transform: translateY(-10px); }
+ }
+ @keyframes release {
+ 0%, 100% { opacity: 0; transform: translate(-50%, 0); }
+ 50% { opacity: 1; transform: translate(-50%, 10px); }
+ }
</style>
</head>
<body>
@@ -179,7 +211,9 @@
<div id="menu">
{% include 'menu.html' %}
</div>
-
+
+ <div class="scroll-guide"></div>
+
<div class="content-wrapper">
<!-- å†…å®¹å— 1 -->
<div class="content-block" id="block1">
@@ -323,6 +357,7 @@
<p><small>The repository used to create this website is available at <a href="https://gitlab.igem.org/2024/tsinghua" style="color: black;">gitlab.igem.org/2024/tsinghua</a>.</small></p>
</div>
</footer>
+
</body>
<script>
@@ -336,5 +371,17 @@
}, 500);
}, 2000); // Hide after 2 seconds (adjust as needed)
});
+window.addEventListener('scroll', function() {
+ var scrollGuide = document.querySelector('.scroll-guide');
+ var scrollPosition = window.scrollY;
+ var windowHeight = window.innerHeight;
+ var documentHeight = document.documentElement.scrollHeight;
+
+ if (scrollPosition + windowHeight >= documentHeight - 100) {
+ scrollGuide.style.display = 'none';
+ } else {
+ scrollGuide.style.display = 'block';
+ }
+ });
</script>
</html>
\ No newline at end of file
--
GitLab