Desain
Mulai
21 Agu 2025
Efek kanvas yang dapat ditarik di Framer membuat
Panduan langkah demi langkah untuk mengimplementasikan efek kanvas di Framer. Tambahkan elemen yang dapat ditarik, dan tingkatkan interaksi pengguna untuk memberikan kesempatan menambah dinamika pada situs web Anda.
Diposting oleh
Diterjemahkan oleh
Daftar Isi
Daftar Isi
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 Framer ‘Create a canvas effect in Framer with draggable elements’.
