`これは、Frontend Challenge v24.09.04、CSS アート: スペースへの提出物です。

インスピレーション

CSS アートと HTML を使用して、太陽系をインタラクティブで視覚的に魅力的に表現したいと考えました。インスピレーションは、宇宙と天体の美しさへの憧れから来ています。このプロジェクトを通じて、私はミニマルなデザインと、ユーザーが太陽系の各惑星について探索して学ぶことを奨励するインタラクティブな要素を組み合わせることを目指しました。

デモ

ライブデモ: 太陽系を探索する
https://solar-system-explorer-css-art.vercel.app

以下の埋め込みコード エディターでプロジェクトのプレビューを確認することもできます:
https://github.com/Sooryaprabhath/solar-system-explorer-css-art

旅

このチャレンジでは、クリエイティブな CSS デザインとインタラクティブな JavaScript 機能を組み合わせて、エクスペリエンスをよりダイナミックにすることにしました。プロセスの内訳は次のとおりです:

惑星のデザイン: CSS グリッドとホバー アニメーションを組み合わせて、楽しいインタラクティブ性を提供する惑星カードを作成しました。惑星名と重要な情報が動的に表示されます。

インタラクティブなホバー エフェクト: 各惑星には、天体の発光方法からインスピレーションを得た、輝くホバー エフェクトがあります。また、軌道の動きをシミュレートするために、ホバリング時の回転アニメーションも追加しました。

詳細情報のモーダル: 惑星をクリックすると、モーダルがポップアップして追加情報が表示され、没入型の学習体験が生まれます。これにより、アプリはインタラクティブかつ有益なものになります。

CSS アート: 外部画像を使用する代わりに、太陽系アート全体が純粋な CSS を使用して構築されました。惑星の外観と雰囲気をシミュレートするために、形、色、グロー効果に焦点を当てました。

応答性: レイアウトは完全に応答性があり、すべての画面サイズに適応するため、ユーザーはどのデバイスからでも太陽系を探索できます。

学んだこと:
シンプルな JavaScript を使用して CSS アートをインタラクティブにするという挑戦。
高度なホバー効果とアニメーションを実装して、静的要素に命を吹き込みます。
CSS グリッドとフレックスボックスの力で、レスポンシブでクリーンなレイアウトを作成します。
次は何ですか?
より詳細な惑星情報を追加し、可能であれば惑星のインタラクティブな 3D ビューを実装して、より現実に近い体験をシミュレートする予定です。
モーダルを強化して、惑星の回転速度や温度変化などのリアルタイム データを表示します。`