우선 만드려는 건 지구가 중앙에 있고, 양쪽에서 행성이 하나씩 지나가면서
지구의 작음을 보여주는 그러한 반응형 웹사이트를 만들거다.
물론 난 html, css, java전부 초보자에 가깝기에, 웹사이트 제작보다는
"좋은 프롬프트 생성"에 초점을 맞췄다.
개발환경은 윈11 VScode이다.
우선 기본적인 틀을 잡는다.
킹갓 GPT님은 코드를 짜온다.
HTML코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Space Journey</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="container">
<div id="earth" class="planet"></div>
<div id="planets">
<div class="planet" id="mars"></div>
<div class="planet" id="jupiter"></div>
<div class="planet" id="saturn"></div>
<!-- 더 많은 행성을 추가할 수 있습니다. -->
</div>
<div id="final-dot"></div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS코드
/* styles.css */
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow-x: hidden;
}
#container {
position: relative;
height: 5000px; /* 스크롤 길이 조정 */
background: black;
}
.planet {
position: absolute;
border-radius: 50%;
}
#earth {
width: 200px;
height: 200px;
background: blue;
top: 100px;
left: calc(50% - 100px);
}
#planets .planet {
width: 150px;
height: 150px;
background: red; /* 각 행성에 대해 색상을 다르게 설정 */
left: calc(50% - 75px);
opacity: 0;
}
#mars {
top: 1500px;
background: red;
}
#jupiter {
top: 3000px;
background: orange;
}
#saturn {
top: 4500px;
background: yellow;
}
#final-dot {
width: 10px;
height: 10px;
background: lightblue;
border-radius: 50%;
position: absolute;
top: 4800px;
left: calc(50% - 5px);
opacity: 0;
}
JAVA코드
// script.js
window.addEventListener('scroll', function() {
const scrollY = window.scrollY;
const earth = document.getElementById('earth');
const planets = document.getElementById('planets').children;
const finalDot = document.getElementById('final-dot');
// 지구 크기 조절
const earthScale = Math.max(0.1, 1 - scrollY / 2000);
earth.style.transform = `scale(${earthScale})`;
// 행성 나타내기
for (let planet of planets) {
if (scrollY > parseInt(planet.style.top) - window.innerHeight) {
planet.style.opacity = 1;
}
}
// 창백한 푸른 점
if (scrollY > 4500) {
finalDot.style.opacity = 1;
}
});
간단하게 기본 틀은 갖춰진 모습이다.
'코딩 프로젝트' 카테고리의 다른 글
| GPTS를 활용한 AI캐릭터 만들기 - Project AL-1S(2) (0) | 2024.05.31 |
|---|---|
| 우주 웹사이트 만들기 with ChatGPT(4) (0) | 2024.05.31 |
| GPTS를 활용한 AI캐릭터 만들기 - Project AL-1S (1) | 2024.05.30 |
| 우주 웹사이트 개발 with Chatgpt(3) (0) | 2024.05.30 |
| 우주 웹사이트 개발 with Chatgpt(2) (0) | 2024.05.30 |