54 lines
2.0 KiB
JavaScript
54 lines
2.0 KiB
JavaScript
// Navbar color change on scroll
|
|
window.addEventListener('scroll', function() {
|
|
const navbar = document.getElementById('navbar');
|
|
if (window.scrollY > 50) {
|
|
navbar.classList.add('scrolled');
|
|
} else {
|
|
navbar.classList.remove('scrolled');
|
|
}
|
|
});
|
|
|
|
// Back to top button
|
|
const backToTopButton = document.getElementById('back-to-top');
|
|
|
|
window.addEventListener('scroll', function() {
|
|
if (window.scrollY > 300) {
|
|
backToTopButton.style.display = 'block';
|
|
} else {
|
|
backToTopButton.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
backToTopButton.addEventListener('click', function() {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
});
|
|
|
|
// Activate animation when elements come into view
|
|
const animateOnScroll = function() {
|
|
const elements = document.querySelectorAll('.animate__animated');
|
|
|
|
elements.forEach(function(element) {
|
|
const position = element.getBoundingClientRect();
|
|
|
|
// If the element is in the viewport
|
|
if(position.top < window.innerHeight && position.bottom >= 0) {
|
|
// Get the animation class
|
|
const animationClass = Array.from(element.classList).find(className =>
|
|
className.startsWith('animate__') && className !== 'animate__animated'
|
|
);
|
|
|
|
// If it has 'animate__fadeIn' class and is not already visible
|
|
if(animationClass && !element.classList.contains('animated-in')) {
|
|
element.classList.add('animated-in');
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
window.addEventListener('scroll', animateOnScroll);
|
|
// Trigger on page load
|
|
window.addEventListener('load', animateOnScroll);
|