Desain
Wawasan
27 Agu 2025
Implementasi navigasi lanjutan yang muncul saat menggulir di Framer
Berikut adalah panduan praktis untuk mengimplementasikan navigasi mengambang yang muncul secara otomatis saat menggulir di Framer. Panduan ini menjelaskan cara memanfaatkan navigasi lanjutan yang muncul saat menggulir di Framer untuk meningkatkan UX dan aksesibilitas.
Diposting oleh
Diterjemahkan oleh
Daftar Isi
Daftar Isi
Langganan saluran YouTube Framer
Apakah Anda mencari cara untuk membuat navigasi situs web lebih intuitif dan mudah diakses? Jika ya, pertimbangkan untuk menggunakan navigasi mengambang yang muncul saat menggulir. Dalam tutorial ini, kita akan melihat langkah demi langkah cara membuat navigasi yang muncul saat pengguna mulai menggulir dan tetap bertahan hingga akhir halaman.
Menyiapkan Proyek
Sebelum memulai, siapkan proyek Anda. Tempelkan navigasi umum di bagian atas halaman dan buatlah navigasi mengambang terpisah. Tetapkan posisi navigasi mengambang sebagai fixed, dan atur untuk berjarak 20piksel dari atas, kiri, dan kanan.
Mendefinisikan Bagian Gulir
Anda perlu mendefinisikan bagian gulir untuk menentukan kapan navigasi mengambang muncul. Tambahkan bagian gulir ke bagian hero dan beri nama “hero”. Pilih navigasi mengambang, tambahkan efek animasi gulir, tetapkan pemicu sebagai bagian terlihat, dan tentukan bagian hero. Atur viewport ke atas agar animasi berjalan begitu bagian hero mencapai bagian atas viewport.
Menyesuaikan Animasi
Selanjutnya, atur animasi navigasi mengambang. Atur opasitas ke 1 dan skala ke 1. Secara bersamaan, untuk mengeluarkan navigasi dari layar, atur nilai Y ke -110. Dengan begitu, Anda dapat memastikan bahwa navigasi muncul dengan lancar segera setelah Anda menggulir di pratinjau.
Mengatasi Masalah Navigasi Menghilang
Terkadang, masalah bisa muncul di mana navigasi menghilang bersamaan dengan hilangnya bagian hero dari viewport. Dalam kasus ini, buka kunci transisi masuk dan keluar dari animasi gulir, kemudian hapus animasi keluar untuk menyelesaikan masalah.
Menambahkan Offset
Terakhir, tambahkan offset agar animasi dapat berjalan sedikit lebih awal. Dengan menetapkan offset Y ke 10piksel pada bagian hero, animasi akan dipicu 10 piksel sebelum bagian hero mencapai bagian atas viewport.
Kesimpulan
Navigasi mengambang yang muncul saat menggulir di FramerFramer adalah cara sederhana namun efektif untuk meningkatkan pengalaman pengguna dan meningkatkan aksesibilitas navigasi. Dengan mengikuti proses ini, semua orang dapat mengubah navigasi situs web mereka sendiri menjadi lebih intuitif.
Artikel ini adalah adaptasi dan terjemahan dari konten di blog resmi Framer, ‘Advanced scroll-triggered navigation: implementation guide for UX designers’.
