{"id":23339893,"url":"https://github.com/aleaengineer/orbit-animation","last_synced_at":"2025-04-07T14:40:40.863Z","repository":{"id":262556343,"uuid":"887655417","full_name":"aleaengineer/Orbit-Animation","owner":"aleaengineer","description":"Animasi ini menampilkan simulasi sistem orbit sederhana menggunakan HTML, CSS, dan JavaScript. Elemen-elemen dalam animasi ini meliputi matahari sebagai pusat orbit, beberapa planet, bintang statis sebagai latar belakang, bintang jatuh, serta efek Bima Sakti yang memberikan kesan kabut di angkasa.","archived":false,"fork":false,"pushed_at":"2024-11-13T03:52:05.000Z","size":62,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-13T17:16:55.174Z","etag":null,"topics":["aleaengineer","animation","css","html","javascript","orbit"],"latest_commit_sha":null,"homepage":"https://aleaengineer.github.io/Orbit-Animation/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aleaengineer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-13T03:46:58.000Z","updated_at":"2024-11-13T03:57:27.000Z","dependencies_parsed_at":"2024-11-13T06:15:07.704Z","dependency_job_id":null,"html_url":"https://github.com/aleaengineer/Orbit-Animation","commit_stats":null,"previous_names":["aleaengineer/orbit-animation"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aleaengineer%2FOrbit-Animation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aleaengineer%2FOrbit-Animation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aleaengineer%2FOrbit-Animation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aleaengineer%2FOrbit-Animation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aleaengineer","download_url":"https://codeload.github.com/aleaengineer/Orbit-Animation/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247673422,"owners_count":20977118,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aleaengineer","animation","css","html","javascript","orbit"],"created_at":"2024-12-21T04:16:22.425Z","updated_at":"2025-04-07T14:40:40.782Z","avatar_url":"https://github.com/aleaengineer.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Orbit Animation with Stars, Falling Stars, and Milky Way Effect\n\nAnimasi ini menampilkan simulasi sistem orbit sederhana menggunakan HTML, CSS, dan JavaScript. Elemen-elemen dalam animasi ini meliputi matahari sebagai pusat orbit, beberapa planet, bintang statis sebagai latar belakang, bintang jatuh, serta efek Bima Sakti yang memberikan kesan kabut di angkasa.\n\n## Fitur Animasi\n\n1. **Matahari di Pusat Orbit** - Sebuah lingkaran berwarna kuning yang berperan sebagai pusat orbit.\n2. **Planet Berorbit** - Tiga planet berwarna berbeda yang mengelilingi matahari dengan kecepatan dan ukuran orbit yang berbeda.\n3. **Bintang Latar Belakang** - Bintang kecil yang berkelap-kelip, tersebar secara acak di latar belakang.\n4. **Bintang Jatuh** - Bintang jatuh secara acak dengan efek kilatan, memberikan kesan angkasa yang dinamis.\n5. **Efek Bima Sakti** - Kabut berputar di latar belakang yang memberikan kesan galaksi dengan efek rotasi yang lambat.\n\n## Struktur File\n\n- **HTML**: Struktur dasar halaman dan kontainer elemen untuk matahari, planet, dan efek Bima Sakti.\n- **CSS**: Styling dan animasi untuk elemen-elemen seperti orbit, bintang, planet, dan efek Bima Sakti.\n- **JavaScript**: Logika untuk menambahkan bintang statis dan bintang jatuh secara acak di layar.\n\n## Cara Menjalankan\n\n1. **Clone atau unduh** repository ini ke komputer Anda.\n2. Buka file `index.html` menggunakan browser (Chrome, Firefox, atau browser modern lainnya).\n3. Anda akan melihat animasi orbit dengan matahari, planet, bintang berkelap-kelip, bintang jatuh, dan efek Bima Sakti di latar belakang.\n\n## Kode Utama\n\n- **Orbit Container**: `orbit-container` digunakan sebagai jalur orbit bagi planet.\n- **Animasi Matahari**: `sun` adalah elemen statis di pusat orbit.\n- **Planet**: Terdapat tiga planet dengan animasi rotasi yang mengelilingi matahari.\n- **Bintang**: Bintang statis dibuat menggunakan elemen `.star`, dan bintang jatuh menggunakan `.falling-star`.\n- **Efek Bima Sakti**: `milky-way` adalah elemen dengan efek kabut yang berotasi secara perlahan.\n\n## Contoh Kode\n\nBerikut ini adalah potongan kode untuk elemen utama animasi orbit:\n\n```html\n\u003cdiv class=\"orbit-container\"\u003e\n    \u003cdiv class=\"sun\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"planet planet-1\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"planet planet-2\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"planet planet-3\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### CSS untuk Animasi Bintang Jatuh\n```css\n@keyframes fall {\n    0% { transform: translateY(0) translateX(0); opacity: 1; }\n    100% { transform: translateY(200vh) translateX(100vw); opacity: 0; }\n}\n```\n\n## Teknologi yang Digunakan\n\n- **HTML**: Untuk struktur markup dasar.\n- **CSS**: Untuk styling elemen dan animasi.\n- **JavaScript**: Untuk menambahkan bintang secara acak di latar belakang.\n\n## Pengembangan Lebih Lanjut\n\n- Menambahkan lebih banyak planet dengan warna dan kecepatan orbit yang berbeda.\n- Menambahkan efek suara untuk memberikan pengalaman yang lebih immersif.\n- Memperluas animasi bintang jatuh agar terjadi lebih sering atau dengan arah acak.\n\n## Screenshot\n\n![Screenshot](screenshot.png)\n\n## Lisensi\n\nProyek ini bebas digunakan untuk tujuan pribadi atau pendidikan.\n\n---\n\nSelamat mencoba dan semoga animasi ini bermanfaat untuk pemahaman dasar tentang CSS animasi dan JavaScript untuk manipulasi DOM sederhana!\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faleaengineer%2Forbit-animation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faleaengineer%2Forbit-animation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faleaengineer%2Forbit-animation/lists"}