Gyannetra_website/js/page-specific.js

/**
 * Page-specific animations and effects for Gyannetra Website
 * Handles unique interactions for different sections and pages
 */

document.addEventListener('DOMContentLoaded', function() {
    // Detect current page
    const currentPath = window.location.pathname;
    const pageName = currentPath.split('/').pop() || 'index.html';
    
    // Initialize common elements
    initCommonElements();
    
    // Initialize page-specific effects
    switch (pageName) {
        case 'index.html':
            initHomePage();
            break;
        case 'about.html':
            initAboutPage();
            break;
        case 'contact.html':
            initContactPage();
            break;
        default:
            // Check if it's a service page
            if (currentPath.includes('/Services/')) {
                initServicePage();
            }
            // Check if it's an industry page
            else if (currentPath.includes('/Industries/')) {
                initIndustryPage();
            }
            // Check if it's an education page
            else if (currentPath.includes('/Education/')) {
                initEducationPage();
            }
    }
});

// Initialize elements common to all pages
function initCommonElements() {
    // Initialize header scroll effect
    initHeaderScroll();
    
    // Initialize footer animations
    initFooterAnimations();
    
    // Initialize section entrance animations
    initSectionAnimations();
}

// Header animation on scroll
function initHeaderScroll() {
    const header = document.querySelector('.site-header');
    if (!header) return;
    
    let lastScrollY = 0;
    
    window.addEventListener('scroll', () => {
        const scrollY = window.scrollY;
        
        // Add shadow and background when scrolling down
        if (scrollY > 20) {
            header.classList.add('header-scrolled');
        } else {
            header.classList.remove('header-scrolled');
        }
        
        // Hide header when scrolling down quickly, show when scrolling up
        if (scrollY > lastScrollY + 50) {
            header.classList.add('header-hidden');
        } else if (scrollY < lastScrollY - 10) {
            header.classList.remove('header-hidden');
        }
        
        lastScrollY = scrollY;
    });
}

// Homepage specific animations
function initHomePage() {
    // Initialize expertise item animations
    initExpertiseItems();
    
    // Initialize tech section parallax
    initTechParallax();
}

// Expertise items hover and click effects
function initExpertiseItems() {
    const expItems = document.querySelectorAll('.exp-item');
    
    expItems.forEach(item => {
        // Add hover effect
        item.addEventListener('mouseenter', function() {
            this.classList.add('exp-hover');
        });
        
        item.addEventListener('mouseleave', function() {
            this.classList.remove('exp-hover');
        });
        
        // Add click animation
        item.addEventListener('click', function() {
            this.classList.add('exp-click');
            
            setTimeout(() => {
                this.classList.remove('exp-click');
            }, 300);
        });
    });
    
    // Add staggered entrance animation
    expItems.forEach((item, index) => {
        // Set staggered animation delay
        item.style.animationDelay = `${index * 0.15}s`;
        
        // Add animation class
        item.classList.add('animate-entrance');
    });
}

// Tech section parallax effect
function initTechParallax() {
    const techSection = document.getElementById('technologies');
    if (!techSection) return;
    
    window.addEventListener('scroll', () => {
        // Get section position
        const rect = techSection.getBoundingClientRect();
        const viewportHeight = window.innerHeight;
        
        // Check if section is in viewport
        if (rect.top < viewportHeight && rect.bottom > 0) {
            // Calculate percentage scrolled through the section
            const scrollPercentage = 1 - Math.max(0, Math.min(1, rect.bottom / (rect.height + viewportHeight)));
            
            // Apply parallax effect to tech icons
            const techItems = document.querySelectorAll('.tech-icon-container');
            techItems.forEach((item, index) => {
                const offsetFactor = (index % 3 - 1) * 20; // Different offset for each item
                const translateY = scrollPercentage * offsetFactor;
                item.style.transform = `translateY(${translateY}px)`;
            });
        }
    });
}

// About page specific animations
function initAboutPage() {
    // Team member hover effects
    const teamMembers = document.querySelectorAll('.team-member');
    if (teamMembers.length > 0) {
        teamMembers.forEach(member => {
            member.addEventListener('mouseenter', function() {
                this.classList.add('member-hover');
            });
            
            member.addEventListener('mouseleave', function() {
                this.classList.remove('member-hover');
            });
        });
    }
}

// Contact page specific animations
function initContactPage() {
    // Form input effects
    const formInputs = document.querySelectorAll('input, textarea');
    if (formInputs.length > 0) {
        formInputs.forEach(input => {
            // Add focus effect
            input.addEventListener('focus', function() {
                this.parentElement.classList.add('input-focused');
            });
            
            input.addEventListener('blur', function() {
                if (!this.value) {
                    this.parentElement.classList.remove('input-focused');
                }
            });
            
            // Check for pre-filled inputs
            if (input.value) {
                input.parentElement.classList.add('input-focused');
            }
        });
    }
}

// Service page specific animations
function initServicePage() {
    // Service cards animation
    const serviceCards = document.querySelectorAll('.service-card');
    if (serviceCards.length > 0) {
        serviceCards.forEach((card, index) => {
            // Add staggered animation
            card.style.animationDelay = `${index * 0.15}s`;
            card.classList.add('animate-slide-up');
        });
    }
}

// Industry page specific animations
function initIndustryPage() {
    // Case study hover effects
    const caseStudies = document.querySelectorAll('.case-study');
    if (caseStudies.length > 0) {
        caseStudies.forEach(study => {
            study.addEventListener('mouseenter', function() {
                this.classList.add('case-hover');
            });
            
            study.addEventListener('mouseleave', function() {
                this.classList.remove('case-hover');
            });
        });
    }
}

// Education page specific animations
function initEducationPage() {
    // Course card effects
    const courseCards = document.querySelectorAll('.course-card');
    if (courseCards.length > 0) {
        courseCards.forEach(card => {
            card.addEventListener('click', function() {
                this.classList.toggle('card-expanded');
            });
        });
    }
}

// Section entrance animations
function initSectionAnimations() {
    const sections = document.querySelectorAll('section');
    
    // Create intersection observer
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('section-visible');
                
                // Animate children with delay
                const children = entry.target.querySelectorAll('.animate-on-visible');
                children.forEach((child, index) => {
                    child.style.animationDelay = `${index * 0.1}s`;
                    child.classList.add('element-visible');
                });
            }
        });
    }, {
        threshold: 0.15,
        rootMargin: '0px 0px -10% 0px'
    });
    
    // Observe all sections
    sections.forEach(section => {
        observer.observe(section);
        section.classList.add('section-hidden');
    });
}

// Footer animations
function initFooterAnimations() {
    const footer = document.querySelector('.site-footer');
    if (!footer) return;
    
    // Create intersection observer for footer
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                footer.classList.add('footer-visible');
                
                // Staggered animation for footer columns
                const columns = footer.querySelectorAll('.footer-col');
                columns.forEach((col, index) => {
                    col.style.animationDelay = `${index * 0.15}s`;
                    col.classList.add('col-visible');
                });
            }
        });
    }, {
        threshold: 0.2
    });
    
    observer.observe(footer);
}