Sebuah proyek galeri seni digital interaktif yang menggabungkan estetika minimalis dengan animasi modern. Web ini menggunakan teknik smooth horizontal scrolling, efek parallax depth, dan kursor kustom yang responsif terhadap interaksi pengguna.
- Sinematik Reveal: Animasi teks dan gambar yang muncul secara bertahap (staggered) saat halaman pertama kali dimuat menggunakan GSAP.
- Horizontal Scroll Experience: Navigasi unik yang mengubah scroll vertikal mouse menjadi pergerakan horizontal yang mulus.
- Efek Parallax 3D: Karya seni merespons pergerakan kursor, menciptakan ilusi kedalaman (depth perception).
- Interactive Cursor: Kursor kustom yang dinamis dan berubah bentuk saat berinteraksi dengan elemen galeri.
- Desain Responsif: Layout yang bersih dan gelap (dark mode) untuk memastikan karya seni menjadi fokus utama.
- HTML5: Struktur semantik untuk aksesibilitas dan SEO.
- CSS3: Styling modern menggunakan Flexbox, CSS Grid, dan
clip-pathuntuk efek visual. - JavaScript (ES6): Logika interaksi dan manipulasi DOM.
- GSAP (GreenSock Animation Platform): Engine utama untuk animasi performa tinggi (60fps).
- Clone repositori ini:
git clone https://github.com/Dulanova/Artshcase
- Buka folder proyek:
cd Artshcase - Jalankan file:
Cukup buka
index.htmldi browser favorit Anda, atau gunakan ekstensi Live Server di VS Code untuk pengalaman terbaik.
├── index.html # Struktur utama dan pemanggilan library
├── style.css # Desain visual dan layouting
├── script.js # Logika animasi GSAP dan interaksi kursor
└── README.md # Dokumentasi proyek
| Fitur | Deskripsi |
|---|---|
| Entrance | Teks muncul dengan efek masking clip-path. |
| Parallax | Kartu bergeser berdasarkan atribut data-speed. |
| Hover | Gambar berubah dari grayscale ke warna penuh. |
Proyek ini dibuat untuk tujuan pembelajaran dan portofolio. Bebas digunakan dan dimodifikasi.
Dibuat dengan ❤️ oleh @Dulanova