76 lines
2.8 KiB
JavaScript
76 lines
2.8 KiB
JavaScript
// ============================================================
|
|
// 메인 스크립트 (전체 기능 포함)
|
|
// ============================================================
|
|
|
|
// DOMContentLoaded 이벤트
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
|
|
// ============================================================
|
|
// 메뉴 토글
|
|
// ============================================================
|
|
const menuBtn = document.querySelector('.menu-btn');
|
|
const navMenu = document.querySelector('.nav-menu');
|
|
if (menuBtn && navMenu) {
|
|
menuBtn.addEventListener('click', () => {
|
|
navMenu.classList.toggle('open');
|
|
menuBtn.classList.toggle('open');
|
|
});
|
|
}
|
|
|
|
// ============================================================
|
|
// 스크롤 애니메이션
|
|
// ============================================================
|
|
const scrollElems = document.querySelectorAll('[data-scroll]');
|
|
const observerOptions = {
|
|
root: null,
|
|
rootMargin: '0px',
|
|
threshold: 0.1
|
|
};
|
|
const scrollObserver = new IntersectionObserver((entries, observer) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('animate');
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
scrollElems.forEach(el => scrollObserver.observe(el));
|
|
|
|
// ============================================================
|
|
// 상단 버튼/헤더 스크롤 효과
|
|
// ============================================================
|
|
const header = document.querySelector('header');
|
|
const topBtn = document.querySelector('.back-to-top');
|
|
window.addEventListener('scroll', () => {
|
|
if (window.scrollY > 50) {
|
|
header?.classList.add('scrolled');
|
|
topBtn?.classList.add('visible');
|
|
} else {
|
|
header?.classList.remove('scrolled');
|
|
topBtn?.classList.remove('visible');
|
|
}
|
|
});
|
|
|
|
topBtn?.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));
|
|
|
|
// ============================================================
|
|
// 기타 커스텀 이벤트/버튼
|
|
// ============================================================
|
|
// 예: 상담 신청 모달 열기
|
|
document.querySelectorAll('.open-consult').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const modal = document.querySelector('#consult-modal');
|
|
modal?.classList.add('open');
|
|
});
|
|
});
|
|
|
|
// 예: 모달 닫기
|
|
document.querySelectorAll('.modal .close-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const modal = btn.closest('.modal');
|
|
modal?.classList.remove('open');
|
|
});
|
|
});
|
|
});
|