Glam Up My Markup: 스타워즈 테마 태양계

Frontend Challenge v24.09.04, Glam Up My Markup: Space에 대한 제출물입니다

내가 만든 것

태양계 탐험: 스타워즈에서 영감을 받은 은하계 여행

멀리 떨어진 은하계에서 우연히 태양계라고 알려진 신비한 항성계에 대한 안내 책자를 우연히 발견했다고 상상해 보십시오. 스타워즈 세계관의 정신으로 이 프로젝트는 우리가 살고 있는 천체 지역을 모험을 즐기는 여행자를 위한 은하계 목적지로 변화시킵니다. 행성의 반짝이는 궤도부터 수수께끼의 소행성대와 얼음 카이퍼 벨트까지, 이 가이드는 제다이가 승인한 여행 동반자 역할을 합니다. 천체, 행성, 달, 우주의 경이로움에 대한 지식으로 가득한 이 책은 타투인만큼 이국적이지만 집처럼 친숙한 시스템을 통해 별 여행으로 여러분을 안내하는 홀로그램 지도와 같습니다.

데모

• 데모: https://menard-codes.github.io/starwars-outer-space/
• 소스 코드(Github Repo): https://github.com/menard-codes/starwars-outer-space

여행

프런트엔드 프레임워크와 웹 구성 요소 영역에서 처음으로 HTML 마크업을 변경하지 않고 바닐라 CSS와 JavaScript를 사용해 본 것은 이번이 처음이었습니다. JS DOM 조작 기술을 한 단계 끌어올리고 멋진 기능을 탐색하게 된 정말 어려운 일이었습니다. CSS 기능. 주말에 함께 해킹했기 때문에 완벽과는 거리가 멀고 몇 가지 UI 문제가 있습니다. 시간이 더 있었다면(그러고 싶었어요!) 거친 가장자리를 모두 다듬고 싶었습니다.

향후 개선에 대한 몇 가지 큰 아이디어도 있습니다. 궤도를 도는 달, 시차 효과, 그리고 스타워즈 스타일이면서도 8비트의 영광을 누리는 태양계에 진정으로 몰입할 수 있는 대화형 경험을 상상해 보세요. 이틀만 작업하면 되는 빠른 프로젝트였지만, 몇 달만 있으면 완전히 새로운 차원의 작업을 수행할 수 있습니다.

참고자료

또한 이 프로젝트의 자산을 얻은 출처를 다음 출처에 명시하고 싶습니다.

• AI 이미지 생성: https://firefly.adobe.com/
• NASA의 행성, 달 및 기타 천체 사진: https://www.nasa.gov/
• FanManDan16의 8비트 데스스타: https://www.newgrounds.com/art/view/fanmandan16/pixel-death-star
• 스타 디스트로이어 픽셀 아트: https://www.pngwing.com/en/free-png-tzcob#google_vignette
• Boba Fonts의 Star Wars 글꼴: https://www.dafont.com/star-jedi.font
• Eladio Simonis가 업로드한 ITC Serif Gothic 글꼴: https://font.download/font/itc-serif-gothic-2

다음 온라인 도구는 다음과 같습니다.

• 이미지 배경을 제거하려면: https://www.remove.bg/upload
• 이미지 픽셀화: https://photo2pixel.co/ (NASA에서 받은 천체 사진을 픽셀화하기 위해 여기에 피드합니다.)

위 내용은 Glam Up My Markup: 스타워즈 테마 태양계의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!