Spaces:
Running
Running
| // Космический фон на Canvas | |
| const canvas = document.getElementById('cosmo-canvas'); | |
| const ctx = canvas.getContext('2d'); | |
| canvas.width = window.innerWidth; | |
| canvas.height = window.innerHeight; | |
| const particles = []; | |
| for (let i = 0; i < 250; i++) { | |
| particles.push({ | |
| x: Math.random() * canvas.width, | |
| y: Math.random() * canvas.height, | |
| radius: Math.random() * 5 + 1, | |
| speedX: Math.random() * 1 - 0.5, | |
| speedY: Math.random() * 1 - 0.5, | |
| color: `hsl(${Math.random() * 360}, 100%, 85%)`, | |
| alpha: Math.random() * 0.6 + 0.4 | |
| }); | |
| } | |
| function animateCosmo() { | |
| ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| particles.forEach(p => { | |
| ctx.globalAlpha = p.alpha; | |
| ctx.beginPath(); | |
| ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2); | |
| ctx.fillStyle = p.color; | |
| ctx.fill(); | |
| p.x += p.speedX; | |
| p.y += p.speedY; | |
| p.alpha = Math.sin(Date.now() * 0.002 + p.x) * 0.6 + 0.4; | |
| if (p.x < 0 || p.x > canvas.width) p.speedX *= -1; | |
| if (p.y < 0 || p.y > canvas.height) p.speedY *= -1; | |
| }); | |
| requestAnimationFrame(animateCosmo); | |
| } | |
| animateCosmo(); | |
| // Управление продуктом (ПК: мышь, мобильные: сенсор) | |
| const product = document.getElementById('cosmo-product'); | |
| if ('ontouchstart' in window) { | |
| let touchStartX = 0, touchStartY = 0; | |
| product.addEventListener('touchstart', (e) => { | |
| touchStartX = e.touches[0].clientX; | |
| touchStartY = e.touches[0].clientY; | |
| }); | |
| product.addEventListener('touchmove', (e) => { | |
| const deltaX = (e.touches[0].clientX - touchStartX) / 8; | |
| const deltaY = (e.touches[0].clientY - touchStartY) / 8; | |
| product.style.transform = `perspective(3000px) rotateY(${deltaX}deg) rotateX(${-deltaY}deg)`; | |
| }); | |
| product.addEventListener('touchend', () => { | |
| product.style.transform = 'perspective(3000px) rotateY(0deg) rotateX(0deg)'; | |
| }); | |
| } else { | |
| document.addEventListener('mousemove', (e) => { | |
| const xAxis = (window.innerWidth / 2 - e.pageX) / 8; | |
| const yAxis = (window.innerHeight / 2 - e.pageY) / 8; | |
| product.style.transform = `perspective(3000px) rotateY(${xAxis}deg) rotateX(${yAxis}deg)`; | |
| }); | |
| product.addEventListener('mouseenter', () => { | |
| product.style.filter = 'brightness(1.5)'; | |
| }); | |
| product.addEventListener('mouseleave', () => { | |
| product.style.filter = 'brightness(1)'; | |
| }); | |
| } | |
| // Заказ | |
| function orderNow() { | |
| document.body.style.transition = 'background 0.8s'; | |
| document.body.style.background = 'radial-gradient(circle, #00ffcc, #ff007a, #000)'; | |
| const title = document.getElementById('cosmo-title'); | |
| title.style.transform = 'scale(1.2)'; | |
| setTimeout(() => { | |
| document.body.style.background = '#000'; | |
| title.style.transform = 'scale(1)'; | |
| }, 1500); | |
| alert('Revolut запущен. Твоя кожа — космос!'); | |
| } | |
| // Эффекты подов | |
| function podEffect(element) { | |
| element.style.transform = 'translateY(-40px) scale(1.25) translateZ(40px)'; | |
| element.style.boxShadow = '0 0 60px rgba(0, 255, 204, 1)'; | |
| } | |
| function podReset(element) { | |
| element.style.transform = 'translateY(0) scale(1) translateZ(0)'; | |
| element.style.boxShadow = 'none'; | |
| } | |
| function podTouch(element) { | |
| element.classList.add('active'); | |
| setTimeout(() => element.classList.remove('active'), 800); | |
| } | |
| // Обновление размеров Canvas при изменении окна | |
| window.addEventListener('resize', () => { | |
| canvas.width = window.innerWidth; | |
| canvas.height = window.innerHeight; | |
| }); | |