feat: add smooth scroll and hero parallax
This commit is contained in:
parent
9b183ef806
commit
c11d6721f9
2 changed files with 25 additions and 1 deletions
24
site/main.js
Normal file
24
site/main.js
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
// Smooth scroll for anchor links (CSS scroll-behavior covers most cases,
|
||||
// this handles the ↓ scroll-hint click on browsers that need it)
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', e => {
|
||||
const target = document.querySelector(anchor.getAttribute('href'));
|
||||
if (target) {
|
||||
e.preventDefault();
|
||||
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Subtle parallax on hero background glow
|
||||
const hero = document.querySelector('.hero');
|
||||
if (hero) {
|
||||
window.addEventListener('scroll', () => {
|
||||
const scrolled = window.scrollY;
|
||||
const heroHeight = hero.offsetHeight;
|
||||
if (scrolled < heroHeight) {
|
||||
// Move the pseudo-element glow upward slightly as user scrolls
|
||||
hero.style.setProperty('--parallax-offset', `${scrolled * 0.3}px`);
|
||||
}
|
||||
}, { passive: true });
|
||||
}
|
||||
|
|
@ -47,7 +47,7 @@ a { text-decoration: none; }
|
|||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(201,168,76,0.07) 0%, transparent 70%);
|
||||
background: radial-gradient(ellipse 80% 60% at 50% calc(40% - var(--parallax-offset, 0px)), rgba(201,168,76,0.07) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue