Spaces:
Running
Running
| // Main JavaScript functionality | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Animation triggers when elements come into view | |
| const animateOnScroll = () => { | |
| const elements = document.querySelectorAll('.feature, .testimonial, .pricing-card'); | |
| elements.forEach(el => { | |
| const elementPosition = el.getBoundingClientRect().top; | |
| const screenPosition = window.innerHeight / 1.3; | |
| if(elementPosition < screenPosition) { | |
| el.classList.add('opacity-100', 'translate-y-0'); | |
| el.classList.remove('opacity-0', 'translate-y-6'); | |
| } | |
| }); | |
| }; | |
| // Initialize elements with animation classes | |
| document.querySelectorAll('.feature, .testimonial, .pricing-card').forEach(el => { | |
| el.classList.add('transition-all', 'duration-500', 'ease-out', 'opacity-0', 'translate-y-6'); | |
| }); | |
| // Run on load and on scroll | |
| animateOnScroll(); | |
| window.addEventListener('scroll', animateOnScroll); | |
| }); |