Glam Up My Markup: スターウォーズをテーマにした太陽系

これは Frontend Challenge v24.09.04、Glam Up My Markup: Space への提出です

私が作ったもの

太陽系を探検する: スター・ウォーズにインスピレーションを得た銀河の旅

はるか彼方の銀河系から届いた伝説的な旅行パンフレット、つまり太陽系として知られる神秘的な星系へのガイドに遭遇したことを想像してみてください。スター・ウォーズの世界の精神に基づいて、このプロジェクトは、私たちの天上の近隣地域を、冒険好きな旅行者のための銀河系の目的地に変えます。惑星のきらめく軌道から謎の小惑星帯や氷のカイパーベルトまで、このガイドはジェダイ公認の旅の相棒として役立ちます。天体、惑星、月、宇宙の不思議に関する知識が満載のこの地図は、タトゥイーンと同じくらいエキゾチックでありながら、故郷のように親しみを感じられる星系を巡る恒星ツアーにあなたを導くホログラム地図のようなものです。

デモ

• デモ: https://menard-codes.github.io/starwars-outer-space/
• ソースコード (Github リポジトリ): https://github.com/menard-codes/starwars-outer-space

旅

フロントエンド フレームワークと Web コンポーネントの出身である私にとって、HTML マークアップを変更せずにバニラ CSS と JavaScript に飛び込むのはこれが初めてでした。これは、JS DOM 操作のスキルをレベルアップし、優れたものを探求するための本当の挑戦でしたCSS機能。週末かけてこれをハックしたので、完璧とは程遠く、UI にいくつかの癖があります。もっと時間があれば (できればよかったのですが!)、粗い部分をすべて滑らかにします。

将来の機能強化に向けた大きなアイデアもいくつかあります。周回する衛星、視差効果、スター ウォーズ スタイルでありながら 8 ビットの栄光に満ちた太陽系に真に浸れるインタラクティブな体験を想像してみてください。作業期間はわずか 2 日で、これは簡単なプロジェクトでしたが、数か月あれば、まったく新しいレベルの素晴らしいプロジェクトに引き上げることができました。

参考文献

また、このプロジェクトのアセットを入手した次のソースにもクレジットを記載したいと思います:

• 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
• Baba 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 中国語 Web サイトの他の関連記事を参照してください。