77 lines
2.7 KiB
JavaScript
77 lines
2.7 KiB
JavaScript
// ========================================
|
|
// Services 페이지 전용 JavaScript
|
|
// ========================================
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
initEmailForm();
|
|
initServiceAnimations();
|
|
});
|
|
|
|
// 이메일 폼 토글 기능
|
|
function initEmailForm() {
|
|
const showEmailBtn = document.getElementById('showEmailForm');
|
|
const emailForm = document.getElementById('emailForm');
|
|
|
|
if (showEmailBtn && emailForm) {
|
|
showEmailBtn.addEventListener('click', function() {
|
|
if (emailForm.style.display === 'none' || !emailForm.style.display) {
|
|
emailForm.style.display = 'block';
|
|
showEmailBtn.textContent = '📧 이메일 양식 닫기';
|
|
emailForm.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
} else {
|
|
emailForm.style.display = 'none';
|
|
showEmailBtn.innerHTML = '<span>📧</span> 이메일 문의하기';
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// 서비스 페이지 애니메이션
|
|
function initServiceAnimations() {
|
|
// 프로세스 스텝 애니메이션
|
|
const processSteps = document.querySelectorAll('.process-step');
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach((entry, index) => {
|
|
if (entry.isIntersecting) {
|
|
setTimeout(() => {
|
|
entry.target.style.opacity = '1';
|
|
entry.target.style.transform = 'translateY(0)';
|
|
}, index * 200);
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, { threshold: 0.3 });
|
|
|
|
processSteps.forEach(step => {
|
|
step.style.opacity = '0';
|
|
step.style.transform = 'translateY(30px)';
|
|
step.style.transition = 'all 0.6s ease';
|
|
observer.observe(step);
|
|
});
|
|
|
|
// 장비 카드 애니메이션
|
|
const equipmentCards = document.querySelectorAll('.equipment-card');
|
|
equipmentCards.forEach((card, index) => {
|
|
card.style.opacity = '0';
|
|
card.style.transform = 'translateY(30px)';
|
|
card.style.transition = 'all 0.6s ease';
|
|
|
|
setTimeout(() => {
|
|
card.style.opacity = '1';
|
|
card.style.transform = 'translateY(0)';
|
|
}, 100 * (index + 1));
|
|
});
|
|
}
|
|
|
|
// 테이블 행 하이라이트
|
|
document.querySelectorAll('.services-table tbody tr').forEach(row => {
|
|
row.addEventListener('mouseenter', function() {
|
|
this.style.backgroundColor = 'rgba(255, 136, 0, 0.05)';
|
|
});
|
|
|
|
row.addEventListener('mouseleave', function() {
|
|
if (!this.classList.contains('main-service')) {
|
|
this.style.backgroundColor = '';
|
|
}
|
|
});
|
|
}); |