Spaces:
Running
Running
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Header scroll effect | |
| window.addEventListener('scroll', function() { | |
| const header = document.querySelector('custom-header'); | |
| if (window.scrollY > 50) { | |
| header.classList.add('scrolled'); | |
| } else { | |
| header.classList.remove('scrolled'); | |
| } | |
| }); | |
| // Animation on scroll | |
| const observerOptions = { | |
| root: null, | |
| rootMargin: '0px', | |
| threshold: 0.1 | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('animate-fade-in-up'); | |
| } | |
| }); | |
| }, observerOptions); | |
| document.querySelectorAll('.animate-on-scroll').forEach(el => { | |
| observer.observe(el); | |
| }); | |
| // Add animation classes to CSS | |
| const style = document.createElement('style'); | |
| style.innerHTML = ` | |
| @keyframes fade-in-up { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .animate-fade-in-up { | |
| animation: fade-in-up 0.6s ease-out forwards; | |
| } | |
| `; | |
| document.head.appendChild(style); |