68 lines
1.9 KiB
JavaScript
68 lines
1.9 KiB
JavaScript
(function() {
|
|
'use strict';
|
|
|
|
// Check for reduced motion preference
|
|
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
|
|
// Reveal on scroll
|
|
function initReveal() {
|
|
const revealElements = document.querySelectorAll('[data-reveal]');
|
|
|
|
if (prefersReducedMotion) {
|
|
revealElements.forEach(el => el.classList.add('revealed'));
|
|
return;
|
|
}
|
|
|
|
const observerOptions = {
|
|
root: null,
|
|
rootMargin: '0px 0px -80px 0px',
|
|
threshold: 0.1
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('revealed');
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
revealElements.forEach((el, index) => {
|
|
el.style.transitionDelay = `${index * 0.1}s`;
|
|
observer.observe(el);
|
|
});
|
|
}
|
|
|
|
// Header background on scroll
|
|
function initHeaderScroll() {
|
|
const header = document.querySelector('.header');
|
|
if (!header) return;
|
|
|
|
let ticking = false;
|
|
|
|
window.addEventListener('scroll', () => {
|
|
if (!ticking) {
|
|
window.requestAnimationFrame(() => {
|
|
if (window.scrollY > 100) {
|
|
header.style.background = 'rgba(248, 246, 241, 0.95)';
|
|
header.style.backdropFilter = 'blur(10px)';
|
|
header.style.webkitBackdropFilter = 'blur(10px)';
|
|
} else {
|
|
header.style.background = 'linear-gradient(to bottom, var(--cream), transparent)';
|
|
header.style.backdropFilter = 'none';
|
|
header.style.webkitBackdropFilter = 'none';
|
|
}
|
|
ticking = false;
|
|
});
|
|
ticking = true;
|
|
}
|
|
}, { passive: true });
|
|
}
|
|
|
|
// Initialize everything when DOM is ready
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
initReveal();
|
|
initHeaderScroll();
|
|
});
|
|
})(); |