Efek gulir dan hover dapat membuat desain lebih kaya dan menambah daya tarik situs, dan Framer dioptimalkan untuk mengimplementasikan efek-efek ini. Dalam tutorial ini, kami akan melihat cara menggunakan efek gulir untuk mengubah teks dan warna latar secara dinamis serta menerapkan efek hover 3D yang menarik pada kartu.

Membuat Variant Hero/Background

Titik awal untuk efek gulir adalah mempersiapkan Variant untuk konten hero dan latar belakang. Jika bagian gambar memiliki tiga bagian, buat tiga varian yang sesuai agar lebih mudah dikelola.

Beri nama unik Scroll Section untuk setiap bingkai bagian gambar. Kemudian, ketika Anda menggunakan Scroll Variant pada komponen hero dan latar belakang, transisi akan otomatis berdasarkan nama bagian yang terlihat di jendela saat ini.

Menambahkan Efek Hover 3D yang Halus

Meskipun transisi gulir sudah cukup untuk membuatnya hidup, menambahkan hover 3D pada kartu membuat interaksi terasa lebih meyakinkan. Pilih efek Hover di panel atribut, lalu sesuaikan sedikit sudut atau skala dan lainnya. Jika interaksi terlalu ekstrem, efeknya akan lebih menonjol dibandingkan informasi itu sendiri, jadi aturlah agar lebih halus. Mainkan sedikit nilainya sampai mendapatkan rasa yang diinginkan.

Penutup

Menggunakan efek gulir dan hover dalam desain menambah dimensi baru dari interaktivitas dan daya tarik visual. Dengan Framer, efek-efek ini mudah untuk dibuat dan mencoba berbagai gaya hingga mendapatkan hasil yang diinginkan. Jelajahi kemungkinan efek gulir dan hover untuk meningkatkan keterampilan desain Anda dan menciptakan desain menawan yang memikat perhatian.

Ikuti proyek efek langkah demi langkah→

Artikel ini adalah adaptasi dan terjemahan dari ‘Exploring scroll and hover effects in Framer’ di blog resmi Framer.