Spaces:
Running
Running
| document.addEventListener('DOMContentLoaded', () => { | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| const headerOffset = 80; | |
| const elementPosition = targetElement.getBoundingClientRect().top; | |
| const offsetPosition = elementPosition + window.pageYOffset - headerOffset; | |
| window.scrollTo({ | |
| top: offsetPosition, | |
| behavior: "smooth" | |
| }); | |
| } | |
| }); | |
| }); | |
| // Intersection Observer for scroll animations | |
| const observerOptions = { | |
| root: null, | |
| rootMargin: '0px', | |
| threshold: 0.1 | |
| }; | |
| const observer = new IntersectionObserver((entries, observer) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('animate-fade-in-up'); | |
| observer.unobserve(entry.target); | |
| } | |
| }); | |
| }, observerOptions); | |
| // Select elements to animate | |
| const animatedElements = document.querySelectorAll('section > div'); | |
| animatedElements.forEach(el => { | |
| el.style.opacity = '0'; // Initially hidden | |
| observer.observe(el); | |
| }); | |
| }); |