107 lines
3.3 KiB
JavaScript
107 lines
3.3 KiB
JavaScript
(function() {
|
|
'use strict';
|
|
|
|
// Check for reduced motion preference
|
|
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
|
|
// Mobile Navigation
|
|
const navToggle = document.querySelector('.nav-toggle');
|
|
const navLinks = document.querySelector('.nav-links');
|
|
|
|
if (navToggle && navLinks) {
|
|
navToggle.addEventListener('click', function() {
|
|
const isExpanded = this.getAttribute('aria-expanded') === 'true';
|
|
this.setAttribute('aria-expanded', !isExpanded);
|
|
this.classList.toggle('active');
|
|
navLinks.classList.toggle('active');
|
|
document.body.style.overflow = navLinks.classList.contains('active') ? 'hidden' : '';
|
|
});
|
|
|
|
// Close menu when clicking a link
|
|
navLinks.querySelectorAll('a').forEach(function(link) {
|
|
link.addEventListener('click', function() {
|
|
navToggle.setAttribute('aria-expanded', 'false');
|
|
navToggle.classList.remove('active');
|
|
navLinks.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
});
|
|
});
|
|
|
|
// Close menu on Escape key
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape' && navLinks.classList.contains('active')) {
|
|
navToggle.setAttribute('aria-expanded', 'false');
|
|
navToggle.classList.remove('active');
|
|
navLinks.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
navToggle.focus();
|
|
}
|
|
});
|
|
}
|
|
|
|
// Header scroll effect
|
|
const header = document.querySelector('.header');
|
|
|
|
function handleScroll() {
|
|
const currentScroll = window.pageYOffset;
|
|
|
|
if (currentScroll > 100) {
|
|
header.classList.add('scrolled');
|
|
} else {
|
|
header.classList.remove('scrolled');
|
|
}
|
|
}
|
|
|
|
window.addEventListener('scroll', handleScroll, { passive: true });
|
|
|
|
// Reveal animations
|
|
if (!prefersReducedMotion) {
|
|
const revealElements = document.querySelectorAll('.reveal');
|
|
|
|
const revealObserver = new IntersectionObserver(function(entries) {
|
|
entries.forEach(function(entry) {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('active');
|
|
revealObserver.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, {
|
|
threshold: 0.1,
|
|
rootMargin: '0px 0px -50px 0px'
|
|
});
|
|
|
|
revealElements.forEach(function(el) {
|
|
revealObserver.observe(el);
|
|
});
|
|
} else {
|
|
// If reduced motion is preferred, show all elements immediately
|
|
document.querySelectorAll('.reveal').forEach(function(el) {
|
|
el.classList.add('active');
|
|
});
|
|
}
|
|
|
|
// Smooth scroll for anchor links
|
|
document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
|
|
anchor.addEventListener('click', function(e) {
|
|
const targetId = this.getAttribute('href');
|
|
if (targetId === '#') return;
|
|
|
|
const target = document.querySelector(targetId);
|
|
if (target) {
|
|
e.preventDefault();
|
|
const headerHeight = header.offsetHeight;
|
|
const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - headerHeight;
|
|
|
|
if (prefersReducedMotion) {
|
|
window.scrollTo(0, targetPosition);
|
|
} else {
|
|
window.scrollTo({
|
|
top: targetPosition,
|
|
behavior: 'smooth'
|
|
});
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
})(); |