gsadmin/KoalaSync
1
0
Fork 0
mirror of https://github.com/Shik3i/KoalaSync.git synced 2026-07-27 12:29:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

website: Add micro-animations including scroll progress bar, nav logo entrance spin, and button shine sweeps

Browse Source
This commit is contained in:
KoalaDev
2026-07-03 11:26:45 +02:00
parent 60c80ad7fb
commit 5460ac3a01
3 changed files with 84 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/app.js
+15
View File
@@ -25,6 +25,21 @@ document.addEventListener('DOMContentLoaded', () => {
console.warn(err);
}
// Scroll Progress Indicator
try {
const progressBar = document.querySelector('.scroll-progress-bar');
if (progressBar) {
window.addEventListener('scroll', () => {
const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const scrolled = height > 0 ? (winScroll / height) * 100 : 0;
progressBar.style.width = scrolled + '%';
}, { passive: true });
}
} catch (err) {
console.warn(err);
}
const safeGetLocalStorage = (key) => {
try {
return localStorage.getItem(key);
website/style.css
+67
View File
@@ -4061,3 +4061,70 @@ header[id] {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-16px); }
}
/* --- High Fidelity Micro-Animations & Identity additions --- */
/* Scroll progress bar glowing line at the top */
.scroll-progress-bar {
position: fixed;
top: 0;
left: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent), #a855f7, #ec4899);
z-index: 9999;
width: 0%;
transition: width 0.1s ease-out;
box-shadow: 0 0 8px var(--accent-glow);
}
/* Navigation logo pop & spin */
.nav-logo-img {
animation: logo-entrance 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
transform-origin: center;
transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
will-change: transform, opacity;
}
.nav-logo-img:hover {
transform: scale(1.15) rotate(360deg);
}
@keyframes logo-entrance {
0% {
transform: scale(0) rotate(-180deg);
opacity: 0;
}
100% {
transform: scale(1) rotate(0deg);
opacity: 1;
}
}
/* Glowing reflection sweep on buttons */
.btn-primary, .btn-firefox, .btn-secondary {
position: relative;
overflow: hidden;
}
.btn-primary::after, .btn-firefox::after, .btn-secondary::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.25) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: skewX(-25deg);
transition: none;
pointer-events: none;
}
.btn-primary:hover::after, .btn-firefox:hover::after, .btn-secondary:hover::after {
left: 100%;
transition: left 0.8s ease-in-out;
}
website/template.html
+2 -1
View File
@@ -201,6 +201,7 @@
</noscript>
</head>
<body>
<div class="scroll-progress-bar"></div>
<a class="skip-link" href="#main-content">Skip to main content</a>
@@ -213,7 +214,7 @@
<nav>
<div class="container nav-content">
<div class="logo-area">
<img src="{{ASSET_PATH}}assets/NewLogoIcon_128.webp" srcset="{{ASSET_PATH}}assets/NewLogoIcon_64.webp 64w, {{ASSET_PATH}}assets/NewLogoIcon_128.webp 128w, {{ASSET_PATH}}assets/NewLogoIcon.webp 256w" sizes="64px" alt="KoalaSync Logo" width="64" height="64">
<img class="nav-logo-img" src="{{ASSET_PATH}}assets/NewLogoIcon_128.webp" srcset="{{ASSET_PATH}}assets/NewLogoIcon_64.webp 64w, {{ASSET_PATH}}assets/NewLogoIcon_128.webp 128w, {{ASSET_PATH}}assets/NewLogoIcon.webp 256w" sizes="64px" alt="KoalaSync Logo" width="64" height="64">
<span>KoalaSync</span>
<div id="nav-extension-status" class="nav-ext-status" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" width="12" height="12"><polyline points="20 6 9 17 4 12"></polyline></svg>