| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| |
| const targetId = this.getAttribute('href'); |
| if (targetId === '#') return; |
| |
| const targetElement = document.querySelector(targetId); |
| if (targetElement) { |
| window.scrollTo({ |
| top: targetElement.offsetTop - 80, |
| behavior: 'smooth' |
| }); |
| } |
| }); |
| }); |
|
|
| |
| window.addEventListener('scroll', function() { |
| const navbar = document.querySelector('custom-navbar'); |
| if (window.scrollY > 100) { |
| navbar.shadowRoot.querySelector('header').classList.add('bg-white', 'shadow-md'); |
| navbar.shadowRoot.querySelector('header').classList.remove('bg-transparent'); |
| } else { |
| navbar.shadowRoot.querySelector('header').classList.remove('bg-white', 'shadow-md'); |
| navbar.shadowRoot.querySelector('header').classList.add('bg-transparent'); |
| } |
| }); |
|
|
| |
| const animateOnScroll = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| entry.target.classList.add('animate-fade-in'); |
| animateOnScroll.unobserve(entry.target); |
| } |
| }); |
| }, { |
| threshold: 0.1 |
| }); |
|
|
| document.querySelectorAll('.animate-on-scroll').forEach(el => { |
| animateOnScroll.observe(el); |
| }); |
|
|
| |
| document.addEventListener('DOMContentLoaded', function() { |
| feather.replace(); |
| |
| |
| }); |