Dokumen ini bertujuan untuk membantu pengguna lokal Framer mengatasi kesulitan akibat kurangnya materi berbahasa Korea dengan menerjemahkan konten dari blog resmi ke dalam bahasa Korea dan menambahkan informasi yang berguna bagi praktik. Harapannya adalah ini bisa memberikan sedikit bantuan kepada Anda pengguna Framer.

Efek dan Remix Proyek→

Dalam meremix proyek ini, Anda akan belajar cara mengatur kontrol segmen animasi, bagaimana menggabungkannya dengan komponen lain menggunakan event, dan cara membuat galeri autoplay.

Melalui contoh ini, Anda dapat membuat kontrol segmen animasi, menghubungkannya dengan komponen lain melalui event, dan mengimplementasikan galeri yang diputar secara otomatis. Bagian terbaiknya adalah, Anda bisa meng-remix proyek ini agar sesuai dengan kebutuhan Anda.

Komponen Kontrol

Mari kita lihat lebih dekat komponen Control. Komponen ini terdiri dari dua tumpukan. Tumpukan atas berisi item yang bisa diklik, masing-masing item beralih ke Variant yang berbeda dan memicu event pada saat yang sama. Event ini penting karena nantinya digunakan oleh komponen Gallery untuk beralih ke Variant yang benar.

Tumpukan bawah mengontrol posisi tombol. Saat status aktif dianimasikan, tombol bergerak ke posisi berbeda di setiap Variant, dan selebihnya ditangani oleh FramerFramer. Ini memudahkan Anda untuk membuat kontrol segmen yang bersih dan berfungsi dengan baik.

Galeri Autoplay

Berikutnya, mari lihat komponen foto. Komponen ini adalah struktur sederhana yang menumpuk beberapa foto. Pada setiap Variant, opacity berubah untuk menampilkan foto yang berbeda. Dengan mengatur perpindahannya setelah beberapa waktu, Anda dapat dengan mudah membuat galeri yang diputar secara otomatis.

Komponen Galeri

Sekarang, kita gabungkan komponen Control dan Photos untuk membuat komponen Gallery. Di sini kita membuat tiga Variant dan menyesuaikan kedua komponen agar sesuai dengan Variant yang tepat. Dengan memanfaatkan event yang dibuat sebelumnya di komponen Control, Anda bisa menghubungkannya agar komponen Gallery beralih ke Variant yang sesuai saat event terjadi.

Kustomisasi Komponen Galeri

Pada tahap akhir, tambahkan interaksi sederhana ke Variant. Dengan begitu, Anda dapat mengatur agar otomatis beralih ke Variant berikutnya setelah beberapa waktu.

Kami juga mengekspos variabel dari komponen Control dan Photos melalui komponen Gallery. Ini memungkinkan Anda untuk dengan mudah menggunakannya kembali atau menghubungkannya dengan CMS.

Kesimpulan

Secara keseluruhan, proyek ini memberikan kesempatan bagus untuk belajar membuat komponen galeri yang bisa digunakan ulang dan responsif tanpa menulis satu baris kode pun. Lebih jauh lagi, Anda bisa melakukan remix dan menyesuaikan sesuai keinginan.

Jadi, jangan ragu untuk membuka proyek ini dan mulai mencobanya.

Lihat efek dan ikuti proyeknya→

Tulisan ini adalah adaptasi dan terjemahan dari konten blog resmi Framer ‘Creating an auto-playing gallery — learn with a free Framer project’.