html/lab5/script.js - main - Hero/web-static-labs

html/lab5/script.js
112 строк4 KB
Hero
upload files
24 окт 2025, 11:31
24 окт 2025, 11:31ce7a4dc
// script.js
document.addEventListener('DOMContentLoaded', function() {
    // Параллакс эффект для звезд
    const stars = document.querySelector('.stars');
    const stars2 = document.querySelector('.stars2');
    const stars3 = document.querySelector('.stars3');
    
    window.addEventListener('mousemove', (e) => {
        const mouseX = e.clientX / window.innerWidth;
        const mouseY = e.clientY / window.innerHeight;
        
        stars.style.transform = `translate(${mouseX * 10}px, ${mouseY * 10}px)`;
        stars2.style.transform = `translate(${mouseX * 20}px, ${mouseY * 20}px)`;
        stars3.style.transform = `translate(${mouseX * 30}px, ${mouseY * 30}px)`;
    });
    
    // Анимация появления карточек
    const taskCards = document.querySelectorAll('.task-card');
    
    taskCards.forEach((card, index) => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(50px)';
        
        setTimeout(() => {
            card.style.transition = 'all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275)';
            card.style.opacity = '1';
            card.style.transform = 'translateY(0)';
        }, index * 100);
    });
    
    // Эффект печатающего текста для заголовка
    const title = document.querySelector('.futuristic-text');
    const originalText = title.textContent;
    title.textContent = '';
    
    let i = 0;
    function typeWriter() {
        if (i < originalText.length) {
            title.textContent += originalText.charAt(i);
            i++;
            setTimeout(typeWriter, 100);
        }
    }
    
    // Запускаем эффект печати после загрузки
    setTimeout(typeWriter, 1000);
    
    // Добавляем звуковые эффекты при наведении (опционально)
    taskCards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            // Можно добавить звук здесь при необходимости
            this.style.cursor = 'pointer';
        });
        
        card.addEventListener('click', function(e) {
            // Анимация клика
            this.style.transform = 'scale(0.95)';
            setTimeout(() => {
                this.style.transform = '';
            }, 150);
        });
    });
    
    // Эффект частиц при клике
    document.addEventListener('click', function(e) {
        createParticles(e.clientX, e.clientY);
    });
    
    function createParticles(x, y) {
        for (let i = 0; i < 5; i++) {
            const particle = document.createElement('div');
            particle.style.position = 'fixed';
            particle.style.left = x + 'px';
            particle.style.top = y + 'px';
            particle.style.width = '4px';
            particle.style.height = '4px';
            particle.style.background = '#44a6f1';
            particle.style.borderRadius = '50%';
            particle.style.pointerEvents = 'none';
            particle.style.zIndex = '1000';
            
            document.body.appendChild(particle);
            
            const angle = Math.random() * Math.PI * 2;
            const velocity = 2 + Math.random() * 2;
            const vx = Math.cos(angle) * velocity;
            const vy = Math.sin(angle) * velocity;
            
            let posX = x;
            let posY = y;
            let opacity = 1;
            
            function animate() {
                posX += vx;
                posY += vy;
                opacity -= 0.02;
                
                particle.style.left = posX + 'px';
                particle.style.top = posY + 'px';
                particle.style.opacity = opacity;
                
                if (opacity > 0) {
                    requestAnimationFrame(animate);
                } else {
                    document.body.removeChild(particle);
                }
            }
            
            animate();
        }
    }
});