diff options
| -rw-r--r-- | src/css/style.css | 25 | ||||
| -rw-r--r-- | src/js/header.js | 5 |
2 files changed, 28 insertions, 2 deletions
diff --git a/src/css/style.css b/src/css/style.css index 976678fe..b39214c6 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -205,6 +205,17 @@ body::-webkit-scrollbar { } } +@keyframes minimize { + from { + scale: 1; + opacity: 1; + } + to { + scale: 0; + opacity: 0; + } +} + /* animation: name duration timing-function delay iteration-count direction fill-mode; */ @@ -331,6 +342,7 @@ body::-webkit-scrollbar { /* topbar styles ========================================== */ header { + overflow: hidden; position: fixed; top: 2rem; left: 0; @@ -345,7 +357,7 @@ header { /* background: rgba(0, 0, 0, 0.2); */ background-color: #000; border-radius: 32px; - transition: all 0.3s; + transition: all 0.1s; } .navBar a { @@ -370,7 +382,7 @@ header { .navBar a::after { content: ''; - position: absolute; + position: fixed; left: 0; bottom: 0; width: 100%; @@ -434,6 +446,15 @@ header, transition: all 0.5s } +header.minimizedIsland { + opacity: 0; + scale: 0; + -webkit-animation-name: minimizeIsland; + animation-name: minimizeIsland; + animation-fill-mode: forwards; + transition: all 0.3s +} + /* other ================================================== */ .contents { diff --git a/src/js/header.js b/src/js/header.js index c04a0f6d..e6c32068 100644 --- a/src/js/header.js +++ b/src/js/header.js @@ -19,3 +19,8 @@ mainHeader.innerHTML = ` header.appendChild(mainHeader); document.getElementById("btn"+page).setAttribute('class', 'active'); + +window.onscroll = event => { +let header = document.querySelector('header'); + header.classList.toggle("minimizedIsland", window.scrollY > 100) +}
\ No newline at end of file |