HTMLify
script.js
Views: 27 | Author: karbonsites
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | document.addEventListener('DOMContentLoaded', () => { // --- 1. Mobile Menu Toggle --- const menuToggle = document.querySelector('.menu-toggle'); const nav = document.querySelector('.nav'); if (menuToggle && nav) { menuToggle.addEventListener('click', () => { nav.classList.toggle('open'); }); } // --- 2. Scroll Animations Observer --- const observerOptions = { root: null, rootMargin: '0px', threshold: 0.1 }; const scrollObserver = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0)'; // Handle specific classes if needed if (entry.target.classList.contains('fade-in-scroll')) { // Apply transition delay if necessary, though CSS handles most } observer.unobserve(entry.target); } }); }, observerOptions); // Apply to elements marked for scroll animation document.querySelectorAll('.fade-in-scroll, .fade-in').forEach(el => { scrollObserver.observe(el); }); // Manually trigger initial visibility for hero elements (which use opacity/transform directly) document.querySelectorAll('.fade-in-up').forEach(el => { el.style.opacity = '1'; el.style.transform = 'translateY(0)'; }); document.querySelectorAll('.fade-in').forEach(el => { el.style.opacity = '1'; }); // --- 3. FAQ Accordion Logic --- document.querySelectorAll('.faq-item .faq-question').forEach(button => { button.addEventListener('click', () => { const parent = button.closest('.faq-item'); const answer = parent.querySelector('.faq-answer'); parent.classList.toggle('active'); if (parent.classList.contains('active')) { answer.style.maxHeight = answer.scrollHeight + 'px'; answer.style.padding = '15px 20px 20px 20px'; } else { answer.style.maxHeight = '0'; answer.style.padding = '0 20px 0 20px'; } }); }); // --- 4. Form Submission Mock (For Contact Page) --- const contactForm = document.getElementById('inquiryForm'); const formMessage = document.getElementById('formMessage'); if (contactForm) { contactForm.addEventListener('submit', function(e) { e.preventDefault(); // Simulate API call delay formMessage.textContent = 'Sending inquiry...'; formMessage.style.color = 'var(--color-primary)'; setTimeout(() => { formMessage.textContent = 'Thank you! Your request has been received. We will be in touch shortly.'; formMessage.style.color = 'var(--color-success)'; contactForm.reset(); }, 1500); }); } }); |