Added scroll indicators
This commit is contained in:
parent
688d410497
commit
5d836ad4a3
@ -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 *******************/
|
||||
|
||||
|
@ -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) {
|
||||
|
@ -16,4 +16,8 @@
|
||||
</div>
|
||||
{{end}}
|
||||
</section>
|
||||
<section id="overlay-arrow">
|
||||
<div class="arrow">‹</div>
|
||||
<div class="arrow">›</div>
|
||||
</section>
|
||||
{{end}}
|
||||
|
Loading…
x
Reference in New Issue
Block a user