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: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
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;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue