creative.js

// Creative JavaScript Effects for Econovation Website

// Particle Canvas Background
document.addEventListener('DOMContentLoaded', function() {
    // Create canvas element for particles if it doesn't exist
    if (!document.getElementById('particle-canvas')) {
        const canvas = document.createElement('canvas');
        canvas.id = 'particle-canvas';
        
        // Insert canvas as the first element in the body
        const particleContainer = document.createElement('div');
        particleContainer.className = 'particle-container';
        particleContainer.appendChild(canvas);
        document.body.insertBefore(particleContainer, document.body.firstChild);
        
        // Initialize particles
        initParticles();
    }
    
    // Apply creative effects to elements
    applyCreativeEffects();
});

// Initialize particle animation
function initParticles() {
    const canvas = document.getElementById('particle-canvas');
    const ctx = canvas.getContext('2d');
    
    // Set canvas size to window size
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    
    // Particle properties
    const particleCount = 100;
    const particles = [];
    const colors = ['#3b82f6', '#4f46e5', '#8b5cf6', '#2563eb'];
    
    // Create particles
    for (let i = 0; i < particleCount; i++) {
        particles.push({
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height,
            radius: Math.random() * 3 + 1,
            color: colors[Math.floor(Math.random() * colors.length)],
            speedX: Math.random() * 1 - 0.5,
            speedY: Math.random() * 1 - 0.5,
            opacity: Math.random() * 0.5 + 0.3
        });
    }
    
    // Animation function
    function animate() {
        requestAnimationFrame(animate);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // Update and draw particles
        for (let i = 0; i < particleCount; i++) {
            const p = particles[i];
            
            // Move particles
            p.x += p.speedX;
            p.y += p.speedY;
            
            // Wrap around edges
            if (p.x < 0) p.x = canvas.width;
            if (p.x > canvas.width) p.x = 0;
            if (p.y < 0) p.y = canvas.height;
            if (p.y > canvas.height) p.y = 0;
            
            // Draw particle
            ctx.beginPath();
            ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
            ctx.fillStyle = p.color;
            ctx.globalAlpha = p.opacity;
            ctx.fill();
            
            // Connect particles within a certain distance
            connectParticles(p, particles);
        }
    }
    
    // Connect particles with lines
    function connectParticles(p, particles) {
        const connectionDistance = 150;
        
        for (let i = 0; i < particles.length; i++) {
            const p2 = particles[i];
            const distance = Math.sqrt(
                Math.pow(p.x - p2.x, 2) + 
                Math.pow(p.y - p2.y, 2)
            );
            
            if (distance < connectionDistance) {
                ctx.beginPath();
                ctx.strokeStyle = p.color;
                ctx.globalAlpha = 1 - (distance / connectionDistance);
                ctx.lineWidth = 0.5;
                ctx.moveTo(p.x, p.y);
                ctx.lineTo(p2.x, p2.y);
                ctx.stroke();
            }
        }
    }
    
    // Handle window resize
    window.addEventListener('resize', function() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    });
    
    // Start animation
    animate();
}

// Apply creative effects to elements
function applyCreativeEffects() {
    // Apply floating animation to selected elements
    document.querySelectorAll('.hero-image, .feature-icon').forEach((el, index) => {
        el.classList.add('float');
        // Stagger the animation
        el.style.animationDelay = `${index * 0.2}s`;
    });
    
    // Apply 3D card effect to program cards
    document.querySelectorAll('.program-card, .testimonial-card').forEach(el => {
        el.classList.add('card-3d');
        
        // Add tilt effect based on mouse position
        el.addEventListener('mousemove', function(e) {
            const rect = this.getBoundingClientRect();
            const x = e.clientX - rect.left; // x position within the element
            const y = e.clientY - rect.top; // y position within the element
            
            const centerX = rect.width / 2;
            const centerY = rect.height / 2;
            
            const rotateX = (y - centerY) / 10;
            const rotateY = (centerX - x) / 10;
            
            this.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
        });
        
        // Reset transform when mouse leaves
        el.addEventListener('mouseleave', function() {
            this.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)';
        });
    });
    
    // Apply animated border to navigation links
    document.querySelectorAll('.nav-link').forEach(el => {
        el.classList.add('animated-border');
    });
    
    // Apply ripple effect to buttons
    document.querySelectorAll('button, .btn').forEach(el => {
        el.classList.add('ripple');
    });
    
    // Apply gradient text to headings
    document.querySelectorAll('h1, h2').forEach(el => {
        if (!el.closest('.hero-section')) { // Skip hero section headings
            el.classList.add('gradient-text');
        }
    });
    
    // Apply glass card effect to selected cards
    document.querySelectorAll('.faq-item, .feature-card').forEach(el => {
        el.classList.add('glass-card');
    });
    
    // Apply shiny button effect to CTA buttons
    document.querySelectorAll('.cta-button, .join-btn').forEach(el => {
        el.classList.add('shiny-btn');
    });
    
    // Apply glow effect to logo
    const logo = document.querySelector('.logo a, .logo-text');
    if (logo) logo.classList.add('glow');
    
    // Apply frosted glass effect to navigation
    const nav = document.querySelector('header, nav');
    if (nav) {
        nav.classList.add('frosted-nav');
        // Remove any existing background color or shadow
        nav.style.backgroundColor = 'transparent';
    }
}

// Parallax scrolling effect
window.addEventListener('scroll', function() {
    const scrollPosition = window.pageYOffset;
    
    // Parallax for hero section
    const heroSection = document.querySelector('.hero-section');
    if (heroSection) {
        heroSection.style.backgroundPositionY = `${scrollPosition * 0.5}px`;
    }
    
    // Parallax for other elements
    document.querySelectorAll('.parallax').forEach(el => {
        const speed = el.getAttribute('data-speed') || 0.2;
        el.style.transform = `translateY(${scrollPosition * speed}px)`;
    });
});

// Interactive cursor effect
document.addEventListener('mousemove', function(e) {
    // Create cursor element if it doesn't exist
    let cursor = document.querySelector('.custom-cursor');
    
    if (!cursor) {
        cursor = document.createElement('div');
        cursor.className = 'custom-cursor';
        document.body.appendChild(cursor);
        
        // Add CSS for cursor
        const style = document.createElement('style');
        style.textContent = `
            .custom-cursor {
                position: fixed;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background-color: rgba(59, 130, 246, 0.3);
                mix-blend-mode: difference;
                pointer-events: none;
                transform: translate(-50%, -50%);
                z-index: 9999;
                transition: transform 0.1s ease, width 0.3s ease, height 0.3s ease;
            }
            
            .cursor-expanded {
                width: 50px;
                height: 50px;
                background-color: rgba(59, 130, 246, 0.2);
            }
        `;
        document.head.appendChild(style);
    }
    
    // Update cursor position
    cursor.style.left = `${e.clientX}px`;
    cursor.style.top = `${e.clientY}px`;
});

// Expand cursor over interactive elements
document.addEventListener('mouseover', function(e) {
    const cursor = document.querySelector('.custom-cursor');
    if (!cursor) return;
    
    if (e.target.tagName === 'A' || 
        e.target.tagName === 'BUTTON' || 
        e.target.classList.contains('card-3d')) {
        cursor.classList.add('cursor-expanded');
    }
});

document.addEventListener('mouseout', function(e) {
    const cursor = document.querySelector('.custom-cursor');
    if (!cursor) return;
    
    if (e.target.tagName === 'A' || 
        e.target.tagName === 'BUTTON' || 
        e.target.classList.contains('card-3d')) {
        cursor.classList.remove('cursor-expanded');
    }
});