Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/aleaengineer/orbit-animation

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.
https://github.com/aleaengineer/orbit-animation

aleaengineer animation css html javascript orbit

Last synced: about 1 month ago
JSON representation

Host: GitHub
URL: https://github.com/aleaengineer/orbit-animation
Owner: aleaengineer
License: mit
Created: 2024-11-13T03:46:58.000Z (2 months ago)
Default Branch: main
Last Pushed: 2024-11-13T03:52:05.000Z (2 months ago)
Last Synced: 2024-11-13T04:20:38.582Z (2 months ago)
Topics: aleaengineer, animation, css, html, javascript, orbit
Language: CSS
Homepage: https://aleaengineer.github.io/Orbit-Animation/
Size: 0 Bytes
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# Orbit Animation with Stars, Falling Stars, and Milky Way Effect

## Fitur Animasi

1. **Matahari di Pusat Orbit** - Sebuah lingkaran berwarna kuning yang berperan sebagai pusat orbit.
2. **Planet Berorbit** - Tiga planet berwarna berbeda yang mengelilingi matahari dengan kecepatan dan ukuran orbit yang berbeda.
3. **Bintang Latar Belakang** - Bintang kecil yang berkelap-kelip, tersebar secara acak di latar belakang.
4. **Bintang Jatuh** - Bintang jatuh secara acak dengan efek kilatan, memberikan kesan angkasa yang dinamis.
5. **Efek Bima Sakti** - Kabut berputar di latar belakang yang memberikan kesan galaksi dengan efek rotasi yang lambat.

## Struktur File

- **HTML**: Struktur dasar halaman dan kontainer elemen untuk matahari, planet, dan efek Bima Sakti.
- **CSS**: Styling dan animasi untuk elemen-elemen seperti orbit, bintang, planet, dan efek Bima Sakti.
- **JavaScript**: Logika untuk menambahkan bintang statis dan bintang jatuh secara acak di layar.

## Cara Menjalankan

1. **Clone atau unduh** repository ini ke komputer Anda.
2. Buka file `index.html` menggunakan browser (Chrome, Firefox, atau browser modern lainnya).
3. Anda akan melihat animasi orbit dengan matahari, planet, bintang berkelap-kelip, bintang jatuh, dan efek Bima Sakti di latar belakang.

## Kode Utama

- **Orbit Container**: `orbit-container` digunakan sebagai jalur orbit bagi planet.
- **Animasi Matahari**: `sun` adalah elemen statis di pusat orbit.
- **Planet**: Terdapat tiga planet dengan animasi rotasi yang mengelilingi matahari.
- **Bintang**: Bintang statis dibuat menggunakan elemen `.star`, dan bintang jatuh menggunakan `.falling-star`.
- **Efek Bima Sakti**: `milky-way` adalah elemen dengan efek kabut yang berotasi secara perlahan.

## Contoh Kode

Berikut ini adalah potongan kode untuk elemen utama animasi orbit:

```html

```

### CSS untuk Animasi Bintang Jatuh
```css
@keyframes fall {
0% { transform: translateY(0) translateX(0); opacity: 1; }
100% { transform: translateY(200vh) translateX(100vw); opacity: 0; }
}
```

## Teknologi yang Digunakan

- **HTML**: Untuk struktur markup dasar.
- **CSS**: Untuk styling elemen dan animasi.
- **JavaScript**: Untuk menambahkan bintang secara acak di latar belakang.

## Pengembangan Lebih Lanjut

- Menambahkan lebih banyak planet dengan warna dan kecepatan orbit yang berbeda.
- Menambahkan efek suara untuk memberikan pengalaman yang lebih immersif.
- Memperluas animasi bintang jatuh agar terjadi lebih sering atau dengan arah acak.

## Screenshot

![Screenshot](screenshot.png)

## Lisensi

Proyek ini bebas digunakan untuk tujuan pribadi atau pendidikan.

---

Selamat mencoba dan semoga animasi ini bermanfaat untuk pemahaman dasar tentang CSS animasi dan JavaScript untuk manipulasi DOM sederhana!
```