Update file home.html

f6d1aa84 · HouTeng Chan · f9e0c9b9 · f6d1aa84
Commit f6d1aa84 authored 6 months ago by HouTeng Chan
--- 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