// Wait for DOM to load document.addEventListener('DOMContentLoaded', function() { // Preloader const preloader = document.createElement('div'); preloader.className = 'preloader'; preloader.innerHTML = `

RDG Digital

`; document.body.appendChild(preloader); // Hide preloader after page loads window.addEventListener('load', function() { setTimeout(function() { preloader.style.opacity = '0'; setTimeout(function() { preloader.style.display = 'none'; }, 500); }, 1000); }); // Add preloader styles const preloaderStyle = document.createElement('style'); preloaderStyle.textContent = ` .preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--bg-color); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 9999; transition: opacity 0.5s ease; } .loader { width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; margin-bottom: 20px; } .loader-inner { width: 40px; height: 40px; border: 4px solid var(--primary-color); border-top: 4px solid transparent; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .preloader p { font-size: 1.5rem; font-weight: 600; color: var(--primary-color); } `; document.head.appendChild(preloaderStyle); // Mobile Navigation const hamburger = document.querySelector('.hamburger'); const navLinks = document.querySelector('.nav-links'); if (hamburger) { hamburger.addEventListener('click', function() { navLinks.classList.toggle('active'); hamburger.classList.toggle('active'); }); } // Close mobile menu when clicking on a nav link const navItems = document.querySelectorAll('.nav-links a'); navItems.forEach(item => { item.addEventListener('click', function() { navLinks.classList.remove('active'); hamburger.classList.remove('active'); }); }); // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); const targetElement = document.querySelector(targetId); if (targetElement) { window.scrollTo({ top: targetElement.offsetTop - 70, behavior: 'smooth' }); } }); }); // Portfolio filtering const filterButtons = document.querySelectorAll('.filter-btn'); const portfolioItems = document.querySelectorAll('.portfolio-item'); filterButtons.forEach(button => { button.addEventListener('click', function() { // Remove active class from all buttons filterButtons.forEach(btn => btn.classList.remove('active')); // Add active class to current button this.classList.add('active'); const filterValue = this.getAttribute('data-filter'); portfolioItems.forEach(item => { if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) { item.style.display = 'block'; setTimeout(() => { item.style.opacity = '1'; item.style.transform = 'scale(1)'; }, 100); } else { item.style.opacity = '0'; item.style.transform = 'scale(0.8)'; setTimeout(() => { item.style.display = 'none'; }, 300); } }); }); }); // Testimonial Slider const testimonialSlides = document.querySelectorAll('.testimonial-slide'); const dots = document.querySelectorAll('.dot'); let currentSlide = 0; function showSlide(index) { testimonialSlides.forEach(slide => { slide.style.opacity = '0'; slide.style.position = 'absolute'; }); dots.forEach(dot => dot.classList.remove('active')); testimonialSlides[index].style.opacity = '1'; testimonialSlides[index].style.position = 'relative'; dots[index].classList.add('active'); } // Initialize the first slide showSlide(currentSlide); // Click event for dots dots.forEach((dot, index) => { dot.addEventListener('click', () => { currentSlide = index; showSlide(currentSlide); }); }); // Auto slide change function nextSlide() { currentSlide = (currentSlide + 1) % testimonialSlides.length; showSlide(currentSlide); } // Change slide every 5 seconds setInterval(nextSlide, 5000); // Animated skill bars on scroll function animateSkillBars() { const skillBars = document.querySelectorAll('.skill-progress'); const skillSection = document.querySelector('.skills'); if (skillSection) { const sectionPosition = skillSection.getBoundingClientRect().top; const screenPosition = window.innerHeight / 1.3; if (sectionPosition < screenPosition) { skillBars.forEach(bar => { const width = bar.style.width; bar.style.width = '0'; setTimeout(() => { bar.style.width = width; }, 300); }); // Remove event listener once animation is triggered window.removeEventListener('scroll', animateSkillBars); } } } window.addEventListener('scroll', animateSkillBars); // Trigger once on page load animateSkillBars(); // Form submission with popup message const contactForm = document.querySelector('.contact-form'); if (contactForm) { contactForm.addEventListener('submit', function(e) { e.preventDefault(); // Get form values const name = contactForm.querySelector('input[type="text"]').value; const email = contactForm.querySelector('input[type="email"]').value; const subject = contactForm.querySelector('input[placeholder="Subject"]').value; const message = contactForm.querySelector('textarea').value; // Create popup message const popup = document.createElement('div'); popup.className = 'popup neomorphic'; popup.innerHTML = ` `; document.body.appendChild(popup); // Close popup when clicking close button const closePopup = popup.querySelector('.close-popup'); closePopup.addEventListener('click', function() { popup.style.opacity = '0'; setTimeout(function() { popup.remove(); }, 500); }); // Add popup styles const popupStyle = document.createElement('style'); popupStyle.textContent = ` .popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 9999; opacity: 0; animation: fadeIn 0.5s forwards; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .popup-content { background-color: var(--bg-color); border-radius: var(--border-radius); padding: 2rem; max-width: 400px; text-align: center; } .popup-icon { font-size: 3rem; color: var(--primary-color); margin-bottom: 1rem; } .popup h3 { margin-bottom: 1rem; } .popup p { margin-bottom: 1.5rem; } `; document.head.appendChild(popupStyle); // Reset form contactForm.reset(); // In a real implementation, you would send the form data to a server here // For WordPress integration, you can use AJAX to send to WP API // or let the form be handled by Elementor's form handler }); } // Scroll to top button const scrollTopBtn = document.createElement('button'); scrollTopBtn.classList.add('scroll-top', 'neomorphic'); scrollTopBtn.innerHTML = ''; document.body.appendChild(scrollTopBtn); window.addEventListener('scroll', function() { if (window.pageYOffset > 300) { scrollTopBtn.classList.add('show'); } else { scrollTopBtn.classList.remove('show'); } }); scrollTopBtn.addEventListener('click', function() { window.scrollTo({ top: 0, behavior: 'smooth' }); }); // Add scroll-to-top button styles const style = document.createElement('style'); style.textContent = ` .scroll-top { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; border-radius: 50%; background-color: var(--bg-color); color: var(--primary-color); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 99; } .scroll-top.show { opacity: 1; visibility: visible; } `; document.head.appendChild(style); // Add active class to navigation based on scroll position function setActiveNav() { const sections = document.querySelectorAll('section, header'); let current = ''; sections.forEach(section => { const sectionTop = section.offsetTop; const sectionHeight = section.clientHeight; if (window.pageYOffset >= sectionTop - 200) { current = section.getAttribute('id'); } }); navItems.forEach(item => { item.classList.remove('active'); if (item.getAttribute('href') === `#${current}`) { item.classList.add('active'); } }); } window.addEventListener('scroll', setActiveNav); });