GPT 4o가 나오고 직업이 없어지니 마니 하는데
아직은 아니다. 아직은 나 같은 초보 코더가 웹사이트를 딸깍 만들 수 없음ㅇㅇ
마저 Gpting을 해보았다.
Spiral 노래 진짜 좋음
이게 그나마 나은 Output인데
지구의 크기 변경 X
왼쪽에서만 나오는 행성들
아래에서 위로 올라오는 행성들
이 세가지 문제가 안 고쳐진다.
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"><img src="Earth.webp" alt="Earth"></div>
<div id="planets">
<div class="planet" id="mars"><img src="Mars.jpg" alt="Mars"></div>
<div class="planet" id="jupiter"><img src="Jupiter.webp" alt="Jupiter"></div>
<div class="planet" id="saturn"><img src="saturn.jpg" alt="Saturn"></div>
<div class="planet" id="uranus"><img src="Uranus.jpg" alt="Uranus"></div>
<div class="planet" id="neptune"><img src="Neptune.webp" alt="Neptune"></div>
<div class="planet" id="venus"><img src="venus.webp" alt="Venus"></div>
<div class="planet" id="mercury"><img src="mucury.webp" alt="Mercury"></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;
font-family: Arial, sans-serif;
background: black; /* 배경색 설정 */
}
#container {
position: relative;
height: 8000px; /* 스크롤 길이 조정 */
}
#earth {
position: fixed; /* 지구를 중앙에 고정 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 10; /* 지구를 최상위로 설정 */
}
#earth img {
width: 200px;
height: auto;
transition: transform 1s;
}
.planet {
position: absolute;
width: 100%;
transition: opacity 1s, transform 1s;
z-index: 5; /* 행성들이 지구 뒤로 지나가도록 설정 */
}
.planet img {
position: absolute;
width: 200px;
height: auto;
opacity: 1; /* 기본적으로 보이도록 설정 */
}
#mars {
top: 1000px;
}
#jupiter {
top: 2000px;
}
#saturn {
top: 3000px;
}
#uranus {
top: 4000px;
}
#neptune {
top: 5000px;
}
#venus {
top: 6000px;
}
#mercury {
top: 7000px;
}
#final-dot {
width: 10px;
height: 10px;
background: lightblue;
border-radius: 50%;
position: absolute;
top: 7800px;
left: calc(50% - 5px);
opacity: 0;
}
JAVA코드
// script.js
window.addEventListener('scroll', function() {
const scrollY = window.scrollY;
const earth = document.getElementById('earth').querySelector('img');
const planets = document.getElementById('planets').children;
const finalDot = document.getElementById('final-dot');
// 지구 크기 조절
const earthScale = Math.max(0.1, 1 - scrollY / 3000);
earth.style.transform = `translate(-50%, -50%) scale(${earthScale})`;
// 행성 나타내기 및 이동
for (let planet of planets) {
const planetTop = parseInt(window.getComputedStyle(planet).top);
const planetImage = planet.querySelector('img');
if (scrollY > planetTop - window.innerHeight + 200) {
planetImage.style.opacity = 1;
const planetOffset = (scrollY - (planetTop - window.innerHeight + 200)) / 5;
const direction = planet.id === 'mars' || planet.id === 'saturn' || planet.id === 'neptune' || planet.id === 'mercury' ? -1 : 1; // 방향 결정
planetImage.style.transform = `translateX(${direction * planetOffset * 3}px)`; // 이동 속도 조절
} else {
planetImage.style.opacity = 0;
planetImage.style.transform = `translateX(0px)`;
}
}
// 창백한 푸른 점
if (scrollY > 7500) {
finalDot.style.opacity = 1;
} else {
finalDot.style.opacity = 0;
}
});
저 3문제가 해결이 안된다....
'코딩 프로젝트' 카테고리의 다른 글
| 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(2) (0) | 2024.05.30 |
| 우주 웹사이트 개발 with Chatgpt(신) (0) | 2024.05.30 |