물고기가 헤엄치는 윈도우 바탕화면 코딩 만들기

날짜:

윈도우 바탕화면에서 사용할 수 있는 물고기가 헤엄치는 애니메이션을 HTML, CSS, JavaScript를 사용하여 구현하는 방법을 알려드리겠습니다. 이 예제에서는 물고기 이미지를 사용하여 화면을 자유롭게 헤엄치게 할 것입니다.

HTML (물고기 헤엄치는 화면 구조)

html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>물고기 바탕화면</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="fish"></div>
<script src="script.js"></script>
</body>
</html>

CSS (스타일링)

css
body {
  margin: 0;
  height: 100vh;
  background-color: #87CEEB;
  overflow: hidden;
}

#fish {
  position: absolute;
  width: 100px; /* 물고기 크기 설정 */
  height: 70px;
  background: url('fish.png') no-repeat; /* 여기서 'fish.png'는 사용하려는 물고기 이미지로 교체해야 함 */
  background-size: contain;
  will-change: transform;
}

JavaScript (물고기 움직임 로직)

javascript
document.addEventListener('DOMContentLoaded', function() {
  const fish = document.getElementById('fish');
  let screenWidth = window.innerWidth;
  let screenHeight = window.innerHeight;
  let x = Math.random() * screenWidth;
  let y = Math.random() * screenHeight;
  let dx = (Math.random() - 0.5) * 4;
  let dy = (Math.random() - 0.5) * 4;

  function moveFish() {
    x += dx;
    y += dy;

    // 화면 경계 검사
    if (x < 0 || x > screenWidth - 100) {
      dx = -dx;
      fish.style.transform = `scaleX(${dx > 0 ? 1 : -1})`;
    }
    if (y < 0 || y > screenHeight - 70) {
      dy = -dy;
    }

    fish.style.left = x + 'px';
    fish.style.top = y + 'px';

    requestAnimationFrame(moveFish);
  }

  moveFish();
});

위 코드를 사용하여 물고기가 헤엄치는 애니메이션을 구현할 수 있습니다. fish.png 파일은 원하는 물고기 이미지로 교체해야 하며, 이미지는 가능한 가장 자연스러운 모습을 가진 것으로 선택하면 좋습니다. HTML 파일은 블로그나 개인 웹사이트의 웹 페이지에 삽입하고, CSS와 JavaScript는 외부 파일로 연결하거나 <style> 태그와 <script> 태그 내에 직접 삽입하여 사용할 수 있습니다.

이를 통해 사용자가 자신의 윈도우 바탕화면 또는 웹사이트에서 물고기가 자유롭게 헤엄치는 애니메이션을 감상할 수 있습니다.

Location: 대한민국