Dokumen ini memecahkan kesulitan yang dialami pengguna domestik Framer dalam belajar karena kurangnya materi dalam bahasa Korea. Kami telah menerjemahkan konten dari blog resmi ke bahasa Korea dan menambahkan informasi yang berguna untuk pekerjaan praktis. Semoga ini dapat sedikit membantu Anda yang menggunakan Framer.

Langganan channel YouTube

Pernahkah Anda mengunjungi situs web dan terkagum dengan tampilan interaktif dan dinamisnya? Salah satu interaksi populer baru-baru ini adalah efek kanvas framework. Cara ini memungkinkan Anda untuk menyeret layar dan menggerakkan elemen seolah menggunakan kanvas sungguhan. Sketch dan Jitter telah mengadopsi efek ini ke situs web mereka. Dalam tutorial ini, kami akan memandu Anda membuat efek ini secara langkah demi langkah menggunakan FramerFramer.

Membuat efek kanvas

1. Pengaturan halaman

Buat bingkai baru dengan tombol F dan pastikan menutupi seluruh halaman. Pin ke kiri dan kanan atas, dan atur tingginya ke viewport. Fill dihilangkan, dan nama bingkai diberi 'Frame Canvas'. Buat bingkai lain di tengah dengan ukuran 2500 × 2500 dan isi dengan warna putih. Nama lapisan ini adalah 'draggable'. Setelah itu, tambahkan objek yang akan diaplikasikan efek di sini.

2. Tambahkan efek drag

Pilih lapisan 'draggable' dan tambahkan Drag dari panel Effects di sebelah kanan. Pertama, tetap dalam mode bebas, lalu matikan Snapback dan Momentum. Pastikan bisa menyeret dalam pratinjau.

3. Atur batasan

Pilih lapisan 'Frame Canvas' dan tentukan nama bagian di bagian Scroll panel properti. Kemudian kembali ke efek drag lapisan 'draggable' dan ubah Freeform ke No, lalu pilih bagian yang baru saja dibuat. Pastikan dalam pratinjau bahwa lapisan 'draggable' hanya dapat bergerak di dalam 'Frame Canvas'.

4. Tambahkan elemen

Tambahkan objek yang ingin Anda operasikan ke lapisan 'draggable'. Setel Overflow halaman dan lapisan 'Frame Canvas' ke Visible untuk melihat seluruh 'draggable'.

5. Status hover dan rotasi

Tambahkan status hover dan rotasi ketika mulai menyeret objek. Gunakan onDragStart untuk mengubah opasitas dan sedikit memutar objek saat menyeretnya.

Menambahkan interaksi pada situs web

Sekarang Anda telah menyelesaikan efek kanvas framework yang memungkinkan pengoperasian komponen secara bebas seolah menggunakan kanvas sungguhan di FramerFramer. Efek ini memberikan nuansa interaktif dan dinamis pada situs web, dan dapat dengan mudah diterapkan menggunakan efek drag Framer.

Lihat lebih banyak proyek efek & remix→

Artikel ini diadaptasi dan diterjemahkan dari konten blog resmi FramerFramer ‘Create a canvas effect in Framer with draggable elements’.