우주 웹사이트 개발 with Chatgpt(2)

지난 글에서는 간단하게 기본틀을 짠 걸 보았다.

사진들과 파일 위치들을 맞춰주고 실행하면 아무것도 안 나온다...

 

근데 그것도 GPT센세가 해결해 주실거임

 

해결...해 주실

 

해 주실....

 

아직은 좀 부족한 것 같다. 개발자들 수명 1년 연장

 

고쳐왔더라... 개발자들 수명 6개월 단축

 

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; /* 스크롤 길이 조정 */
}

.planet {
    position: absolute;
    text-align: center;
    width: 100%;
    opacity: 1; /* 기본값을 1로 설정 */
    transition: opacity 1s;
}

.planet img {
    display: block;
    margin: 0 auto;
    width: 200px;
    height: auto;
}

#earth img {
    width: 200px;
    height: auto;
    transition: transform 1s;
}

#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: 1; /* 기본값을 1로 설정 */
}

 

JAVA코드

// script.js
window.addEventListener('scroll', function() {
    console.log("Scrolling..."); // 스크롤 이벤트 확인
    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 = `scale(${earthScale})`;

    // 행성 나타내기
    for (let planet of planets) {
        const planetTop = parseInt(window.getComputedStyle(planet).top);
        if (scrollY > planetTop - window.innerHeight + 200) {
            planet.style.opacity = 1;
        } else {
            planet.style.opacity = 0;
        }
    }

    // 창백한 푸른 점
    if (scrollY > 7500) {
        finalDot.style.opacity = 1;
    } else {
        finalDot.style.opacity = 0;
    }
});

 

근데 원하는 느낌이랑은 완전 다르게 나와서 계속 만들어본다.