luftglanz/js/drone-animation.js

/**
 * Drone Animation Controller
 * Creates floating drone elements with cosmic glow effects
 */
(function() {
    document.addEventListener('DOMContentLoaded', function() {
        // Only run on the homepage
        if (window.location.pathname.endsWith('index.html') || window.location.pathname.endsWith('/')) {
            createDroneElements();
        }
    });
    
    function createDroneElements() {
        const heroSection = document.querySelector('.hero');
        const servicesSection = document.getElementById('services');
        
        if (heroSection) {
            // Create a container for the animated elements
            const animationContainer = document.createElement('div');
            animationContainer.className = 'animation-container';
            animationContainer.style.position = 'absolute';
            animationContainer.style.top = '0';
            animationContainer.style.left = '0';
            animationContainer.style.width = '100%';
            animationContainer.style.height = '100%';
            animationContainer.style.overflow = 'hidden';
            animationContainer.style.pointerEvents = 'none';
            animationContainer.style.zIndex = '1';
            heroSection.appendChild(animationContainer);
            
            // Create floating drone elements
            createFloatingDrone(animationContainer, 'right', '15%', '20%');
            createFloatingDrone(animationContainer, 'left', '70%', '60%');
            
            // Create floating particles
            for (let i = 0; i < 15; i++) {
                createGlowingParticle(animationContainer);
            }
        }
        
        if (servicesSection) {
            // Create subtle background animations for services section
            const servicesBg = document.createElement('div');
            servicesBg.className = 'services-bg';
            servicesBg.style.position = 'absolute';
            servicesBg.style.top = '0';
            servicesBg.style.left = '0';
            servicesBg.style.width = '100%';
            servicesBg.style.height = '100%';
            servicesBg.style.overflow = 'hidden';
            servicesBg.style.pointerEvents = 'none';
            servicesBg.style.zIndex = '0';
            servicesSection.style.position = 'relative';
            servicesSection.insertBefore(servicesBg, servicesSection.firstChild);
            
            // Create subtle floating particles
            for (let i = 0; i < 10; i++) {
                createGlowingParticle(servicesBg, true);
            }
        }
    }
    
    function createFloatingDrone(container, direction, startX, startY) {
        const drone = document.createElement('div');
        drone.className = 'floating-drone';
        drone.style.position = 'absolute';
        drone.style.width = '80px';
        drone.style.height = '80px';
        drone.style.borderRadius = '50%';
        drone.style.background = 'radial-gradient(circle at center, rgba(88, 70, 249, 0.7), rgba(0, 194, 255, 0.4))';
        drone.style.boxShadow = '0 0 30px rgba(0, 194, 255, 0.6)';
        drone.style.left = startX;
        drone.style.top = startY;
        drone.style.filter = 'blur(5px)';
        
        // Create propeller effects
        const propeller = document.createElement('div');
        propeller.className = 'propeller';
        propeller.style.position = 'absolute';
        propeller.style.width = '100px';
        propeller.style.height = '100px';
        propeller.style.left = '-10px';
        propeller.style.top = '-10px';
        propeller.style.borderRadius = '50%';
        propeller.style.border = '2px solid rgba(255, 255, 255, 0.2)';
        propeller.style.animation = 'spin 2s linear infinite';
        drone.appendChild(propeller);
        
        // Add animation properties
        drone.style.animation = `float-${direction} 15s ease-in-out infinite`;
        container.appendChild(drone);
        
        // Add keyframes for floating animation
        const styleSheet = document.createElement('style');
        styleSheet.type = 'text/css';
        styleSheet.innerHTML = `
            @keyframes float-${direction} {
                0% { transform: translate(0, 0) rotate(0deg); }
                25% { transform: translate(${direction === 'left' ? '-' : ''}80px, 40px) rotate(${direction === 'left' ? '-' : ''}5deg); }
                50% { transform: translate(${direction === 'left' ? '-' : ''}60px, -30px) rotate(${direction === 'left' ? '-' : ''}10deg); }
                75% { transform: translate(${direction === 'left' ? '-' : ''}100px, 50px) rotate(${direction === 'left' ? '-' : ''}3deg); }
                100% { transform: translate(0, 0) rotate(0deg); }
            }
            
            @keyframes spin {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }
        `;
        document.head.appendChild(styleSheet);
    }
    
    function createGlowingParticle(container, subtle = false) {
        const particle = document.createElement('div');
        particle.className = 'glowing-particle';
        
        // Set particle style
        const size = subtle ? Math.random() * 5 + 2 : Math.random() * 10 + 5;
        const opacity = subtle ? Math.random() * 0.3 + 0.1 : Math.random() * 0.5 + 0.2;
        
        particle.style.position = 'absolute';
        particle.style.width = `${size}px`;
        particle.style.height = `${size}px`;
        particle.style.borderRadius = '50%';
        particle.style.background = 'radial-gradient(circle at center, rgba(0, 194, 255, 0.8), rgba(88, 70, 249, 0.4))';
        particle.style.boxShadow = `0 0 ${size * 2}px rgba(0, 194, 255, ${opacity})`;
        
        // Random position
        particle.style.left = `${Math.random() * 100}%`;
        particle.style.top = `${Math.random() * 100}%`;
        
        // Add animation with random duration
        const duration = Math.random() * 20 + 10;
        particle.style.animation = `float-particle ${duration}s ease-in-out infinite`;
        container.appendChild(particle);
        
        // Add keyframes for particle animation if not already added
        if (!document.querySelector('style[data-animation="particle-float"]')) {
            const styleSheet = document.createElement('style');
            styleSheet.type = 'text/css';
            styleSheet.setAttribute('data-animation', 'particle-float');
            styleSheet.innerHTML = `
                @keyframes float-particle {
                    0% { transform: translate(0, 0); }
                    25% { transform: translate(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px); }
                    50% { transform: translate(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px); }
                    75% { transform: translate(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px); }
                    100% { transform: translate(0, 0); }
                }
            `;
            document.head.appendChild(styleSheet);
        }
    }
})();