Added scroll indicators

inc/css/main.css

@@ -148,7 +148,55 @@ nav {
     cursor: pointer;
 }
 
+/******************* SCROLL INDICATOR *******************/
 
+#overlay-arrow {
+    position: absolute;
+    width: 95vw;
+    height: 5vh;
+    left: 2.5vw;
+    bottom: calc((var(--h-ex) - 5vh) / 2 + 2.5vh);
+    visibility: hidden;
+}
+
+.arrow {
+    position: absolute;
+    line-height: 5vh;
+    font-size: 12vh;
+    top: -0.5vh;
+    color: var(--c1);
+    background-color: var(--c3);
+    opacity: 0.7;
+    width: 6vh;
+    height: 6vh;
+    border-radius: 50%;
+    text-align: center;
+    visibility: hidden;
+    animation: notice 3s;
+}
+
+.arrow:first-child {
+    left: 1vw;
+}
+
+.arrow:last-child {
+    right: 1vw;
+}
+
+@keyframes notice {
+    0% {
+        visibility: visible;
+        opacity: 0;
+    }
+    50% {
+        visibility: visible;
+        opacity: 0.9;
+    }
+    100% {
+        visibility: visible;
+        opacity: 0;
+    }
+}
 
 /******************* INFO *******************/
 

inc/js/main.js

@@ -9,11 +9,13 @@ document.addEventListener("DOMContentLoaded", run);
 // global var to control the animation of the text
 var runTextAnimation = true;
 function run() {
-    initializeClickHandler();
+    initialize();
 }
 
-function initializeClickHandler() {
+function initialize() {
     let welcome = document.getElementById("welcome");
+    let exhibit = document.getElementById("exhibition");
+    let notice = document.getElementById("overlay-arrow");
     flyingText(welcome);
     document.addEventListener("click", (e) => {
         let overlay = document.getElementById("info-box");
@@ -28,6 +30,11 @@ function initializeClickHandler() {
             hideElement(overlay);
         }
     });
+
+    // remove the indicator on enter
+    exhibit.addEventListener("mouseenter", () => {
+        notice.remove();
+    }, {once: true});
 }
 
 function handleThumb(overlay, elem) {

tmpl/gallery.html

@@ -16,4 +16,8 @@
     </div>
     {{end}}
 </section>
+<section id="overlay-arrow">
+    <div class="arrow">&#x2039;</div>
+    <div class="arrow">&#x203a;</div>
+</section>
 {{end}}