Files
sisvietnamvn_01/dist/js/main.js
T
2026-05-24 16:46:13 +07:00

98 lines
2.5 KiB
JavaScript

/* ============================================
UMass Amherst - Main JavaScript
============================================ */
document.addEventListener('DOMContentLoaded', () => {
// ---- Mobile Menu ----
const menuToggle = document.getElementById('menu-toggle');
const menuClose = document.getElementById('menu-close');
const mobileMenu = document.getElementById('mobile-menu');
if (menuToggle) {
menuToggle.addEventListener('click', () => {
mobileMenu.classList.add('active');
document.body.style.overflow = 'hidden';
});
}
if (menuClose) {
menuClose.addEventListener('click', () => {
mobileMenu.classList.remove('active');
document.body.style.overflow = '';
});
}
document.querySelectorAll('.mobile-menu__link').forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.remove('active');
document.body.style.overflow = '';
});
});
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && mobileMenu.classList.contains('active')) {
mobileMenu.classList.remove('active');
document.body.style.overflow = '';
}
});
// ---- Hero Slider ----
const slides = document.querySelectorAll('.hero__slide');
const dots = document.querySelectorAll('.hero__dot');
let currentSlide = 0;
let slideInterval;
function goToSlide(index) {
slides.forEach(s => s.classList.remove('active'));
dots.forEach(d => d.classList.remove('active'));
slides[index].classList.add('active');
dots[index].classList.add('active');
currentSlide = index;
}
function nextSlide() {
const next = (currentSlide + 1) % slides.length;
goToSlide(next);
}
function startAutoSlide() {
slideInterval = setInterval(nextSlide, 5000);
}
function resetAutoSlide() {
clearInterval(slideInterval);
startAutoSlide();
}
dots.forEach(dot => {
dot.addEventListener('click', () => {
const index = parseInt(dot.dataset.slide, 10);
goToSlide(index);
resetAutoSlide();
});
});
if (slides.length > 1) {
startAutoSlide();
}
// ---- Scroll Animations ----
const fadeElements = document.querySelectorAll('.fade-up');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
observer.unobserve(entry.target);
}
});
}, {
threshold: 0.1,
rootMargin: '0px 0px -60px 0px'
});
fadeElements.forEach(el => observer.observe(el));
});