바운싱 DVD 로고 화면 보호기

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DVD 로고 바운스</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #111; min-height: 100vh; display: flex; justify-content: center; align-items: center; font-family: 'Arial', sans-serif; overflow: hidden; } #stage { position: relative; width: 90vw; height: 90vh; background-color: #000; border: 2px solid #333; border-radius: 12px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.8); overflow: hidden; } #dvd-logo { position: absolute; top: 0; left: 0; width: 120px; height: 60px; background-color: #ff0000; /* 초기 색상 */ color: white; font-weight: bold; font-size: 1.8rem; display: flex; justify-content: center; align-items: center; border-radius: 8px; letter-spacing: 2px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2); user-select: none; will-change: transform, background-color; transition: background-color 0.1s ease; /* 텍스트가 로고 안에 꽉 차게 */ font-family: 'Impact', 'Arial Black', sans-serif; text-transform: uppercase; } /* 작은 화면에서도 보이도록 */ @media (max-width: 600px) { #dvd-logo { width: 90px; height: 45px; font-size: 1.2rem; } } </style> </head> <body> <div id="stage"> <div id="dvd-logo">DVD</div> </div> <script> (function() { const logo = document.getElementById('dvd-logo'); const stage = document.getElementById('stage'); // 초기 위치 (중앙에서 시작) let posX = stage.clientWidth / 2 - logo.offsetWidth / 2; let posY = stage.clientHeight / 2 - logo.offsetHeight / 2; // 이동 속도 (픽셀/프레임) const speed = 3; let velX = speed; let velY = speed; // 색상 팔레트 (DVD 로고 느낌의 선명한 색) const colors = [ '#ff0000', // 빨강 '#ff8800', // 주황 '#ffff00', // 노랑 '#00cc00', // 초록 '#0088ff', // 파랑 '#8800ff', // 보라 '#ff00cc', // 핑크 '#00cccc', // 시안 '#ff4444', // 연한 빨강 '#44ff44' // 연한 초록 ]; let colorIndex = 0; // 초기 위치 설정 logo.style.left = posX + 'px'; logo.style.top = posY + 'px'; logo.style.backgroundColor = colors[0]; // 리사이즈 대응 (스테이지 크기 변경 시 로고가 경계 밖으로 나가지 않도록) window.addEventListener('resize', () => { // 현재 위치를 기준으로 경계 안으로 조정 const maxX = stage.clientWidth - logo.offsetWidth; const maxY = stage.clientHeight - logo.offsetHeight; if (posX > maxX) posX = maxX; if (posY > maxY) posY = maxY; if (posX < 0) posX = 0; if (posY < 0) posY = 0; logo.style.left = posX + 'px'; logo.style.top = posY + 'px'; }); // 애니메이션 루프 function animate() { // 현재 위치 업데이트 posX += velX; posY += velY; // 스테이지 경계값 계산 const maxX = stage.clientWidth - logo.offsetWidth; const maxY = stage.clientHeight - logo.offsetHeight; // 경계 충돌 감지 및 반사 + 색상 변경 let bounced = false; // 오른쪽 벽 if (posX >= maxX) { posX = maxX; // 경계에 고정 velX = -Math.abs(velX); // 왼쪽으로 반사 bounced = true; } // 왼쪽 벽 else if (posX <= 0) { posX = 0; velX = Math.abs(velX); // 오른쪽으로 반사 bounced = true; } // 아래쪽 벽 if (posY >= maxY) { posY = maxY; velY = -Math.abs(velY); // 위로 반사 bounced = true; } // 위쪽 벽 else if (posY <= 0) { posY = 0; velY = Math.abs(velY); // 아래로 반사 bounced = true; } // 만약 벽에 부딪혔다면 색상 변경 if (bounced) { colorIndex = (colorIndex + 1) % colors.length; logo.style.backgroundColor = colors[colorIndex]; } // 로고 위치 적용 logo.style.left = posX + 'px'; logo.style.top = posY + 'px'; // 다음 프레임 요청 requestAnimationFrame(animate); } // 초기 시작 (약간의 지연 후 시작하여 레이아웃 안정화) setTimeout(() => { // 스테이지 크기에 맞게 초기 위치 재조정 (혹시 모를 상황) posX = Math.min(posX, stage.clientWidth - logo.offsetWidth); posY = Math.min(posY, stage.clientHeight - logo.offsetHeight); posX = Math.max(0, posX); posY = Math.max(0, posY); logo.style.left = posX + 'px'; logo.style.top = posY + 'px'; animate(); }, 100); // 추가: 로고를 클릭하면 색상 수동 변경 (재미 요소) logo.addEventListener('click', () => { colorIndex = (colorIndex + 1) % colors.length; logo.style.backgroundColor = colors[colorIndex]; }); })(); </script> </body> </html>