|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
anchor.addEventListener('click', function(e) { |
|
e.preventDefault(); |
|
document.querySelector(this.getAttribute('href')).scrollIntoView({ |
|
behavior: 'smooth' |
|
}); |
|
}); |
|
}); |
|
|
|
|
|
const sections = document.querySelectorAll('section'); |
|
const observer = new IntersectionObserver((entries, observer) => { |
|
entries.forEach(entry => { |
|
if (entry.isIntersecting) { |
|
entry.target.classList.add('visible'); |
|
observer.unobserve(entry.target); |
|
} |
|
}); |
|
}, { threshold: 0.1 }); |
|
|
|
sections.forEach(section => { |
|
section.classList.add('hidden'); |
|
observer.observe(section); |
|
}); |
|
|
|
|
|
const style = document.createElement('style'); |
|
style.textContent = ` |
|
.hidden { opacity: 0; transform: translateY(20px); transition: all 0.5s; } |
|
.visible { opacity: 1; transform: translateY(0); } |
|
`; |
|
document.head.appendChild(style); |