File size: 3,727 Bytes
f9b8369 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | // Smooth scrolling for navigation links
document.addEventListener('DOMContentLoaded', function() {
// Smooth scrolling
const navLinks = document.querySelectorAll('.nav-link');
navLinks.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetSection = document.querySelector(targetId);
if (targetSection) {
const offsetTop = targetSection.offsetTop - 60; // Adjust for fixed header
window.scrollTo({
top: offsetTop,
behavior: 'smooth'
});
// Close mobile menu if open
const navMenu = document.querySelector('.nav-menu');
const hamburger = document.querySelector('.hamburger');
navMenu.classList.remove('active');
hamburger.classList.remove('active');
}
});
});
// Mobile menu toggle
const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('.nav-menu');
hamburger.addEventListener('click', function() {
navMenu.classList.toggle('active');
this.classList.toggle('active');
});
// Close mobile menu when clicking outside
document.addEventListener('click', function(e) {
if (!hamburger.contains(e.target) && !navMenu.contains(e.target)) {
navMenu.classList.remove('active');
hamburger.classList.remove('active');
}
});
// Sticky navbar effect
const navbar = document.querySelector('.navbar');
let lastScrollY = window.scrollY;
window.addEventListener('scroll', function() {
if (window.scrollY > 100) {
navbar.style.background = 'rgba(255, 255, 255, 0.95)';
} else {
navbar.style.background = 'rgba(255, 255, 255, 0.8)';
}
// Hide navbar on scroll down, show on scroll up
if (window.scrollY > lastScrollY && window.scrollY > 200) {
navbar.style.transform = 'translateY(-100%)';
} else {
navbar.style.transform = 'translateY(0)';
}
lastScrollY = window.scrollY;
});
// Lazy loading for images
const lazyImages = document.querySelectorAll('img[loading="lazy"]');
if ('IntersectionObserver' in window) {
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.src;
imageObserver.unobserve(img);
}
});
});
lazyImages.forEach(img => imageObserver.observe(img));
}
// Add subtle animations on scroll
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
// Observe sections for animation
const sections = document.querySelectorAll('.section');
sections.forEach(section => {
section.style.opacity = '0';
section.style.transform = 'translateY(20px)';
section.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(section);
});
}); |