Menampilkan Portofolio Lebih Menarik

Alih-alih hanya mencantumkan daftar proyek terbaru, membuat halaman indeks yang dipoles dapat membuat seluruh situs lebih menonjol. Dengan menciptakan pengalaman interaktif bagi pengguna, ini dapat memberikan kesan yang lebih mendalam kepada pengunjung. Artikel ini memperkenalkan berbagai cara memanfaatkan komponen Framer dan Anda dapat meremiksnya untuk diterapkan secara langsung.

Interaksi Hover untuk Gambar yang Membesar

Contoh pertama menggunakan efek gambar yang terlihat saat dihover. Pada keadaan awal, opasitas gambar diatur ke 0% dan gambar ditempatkan kecil di tengah. Ketika dihover, gambar diperlihatkan dan diperbesar, lalu dipindahkan ke sudut untuk memberikan kesan dinamis. Mode blending Difference diterapkan pada teks, menambahkan efek semi-transparan pada elemen teks. Setiap item memiliki efek berbeda yang dirancang terpisah.

Gambar Berukuran Besar yang Mengisi Layar

Dalam contoh kedua, ketika mouse ditempatkan di atas item daftar, gambar akan mengisi seluruh layar. Pada kondisi awal, gambar besar disembunyikan dan diatur untuk ditampilkan saat dihover. Selain itu, ada panah yang muncul dari kiri komponen, di mana Overflow diatur ke Hidden agar tidak terlihat pada kondisi awal. Komponen disusun dalam Stack, namun gambar diatur secara independen dengan posisi Absolute untuk ukuran dan lokasi. Panel Properties memungkinkan Anda menambahkan judul, gambar, dan tahun agar komponen ini mudah disesuaikan.

Kartu dengan Latar Belakang yang Ditekankan

Pada contoh ketiga, ketika mouse ditempatkan di atas, terjadilah penekanan latar belakang (Accent) muncul di belakang kartu. Gambar diputar sedikit dan dipindahkan dari bawah ke atas untuk pergerakan kecil, agar teks sejajar vertikal. Panel Properties memungkinkan penyesuaian arah penyelarasan (kiri/kanan), judul, gambar, dan latar belakang penekanan.

Video Thumbnail yang Meluncur

Dalam contoh keempat, ketika mouse ditempatkan di atas, video thumbnail kecil meluncur dari kiri. Pada keadaan awal, opasitas video thumbnail diatur ke 0% dan ukurannya diperkecil, lalu ditampilkan saat dihover untuk memberikan efek seolah konten seluruhnya bergerak ke kanan. Panel Properties memungkinkan penyesuaian video, judul, dan tahun sesuai keinginan.

Video Latar Belakang Daftar Panjang

Contoh kelima menciptakan daftar panjang yang terdiri dari berbagai item. Ketika mouse ditempatkan di atas item tersebut, video akan muncul sebagai latar belakang item. Awalnya, status ditentukan ‘NO’ dan diatur menjadi ‘YES’ saat dihover. Karena disusun dalam Stack, semua komponen tertata rapi. Video diberlakukan dengan posisi Absolute untuk pengaturan ukuran dan penyesuaian bebas. Panel Properties memungkinkan penyesuaian video, judul, tahun, dan status tag dengan mudah.

Masker Teks dengan Latar Belakang Gambar Blur

Contoh terakhir menggunakan gambar blur dan masker teks. Saat dihover, gambar yang dibluri ditampilkan di seluruh layar, dan teks menggunakan gambar itu sebagai masker, menciptakan efek unik. Namun, ukuran gambar blur harus disesuaikan untuk menghindari dampak pada kinerja. Dengan menggunakan komponen Text Mask dari Framer Supply, Anda dapat dengan mudah menerapkan masker dan menyesuaikan penyesuaian Y offset untuk gambar dalam masker teks untuk tampilan yang diinginkan.

Membuat Portofolio yang Berkesan

Lebih dari sekadar daftar, indeks portofolio interaktif dapat mengesankan pengunjung lebih dalam terhadap situs Anda. Dengan menerapkan teknik yang diperkenalkan dalam artikel ini, Anda dapat menampilkan karya Anda dengan cara yang lebih orisinal dan visual menarik. Apa jenis efek indeks yang ingin Anda coba terapkan pertama kali pada halaman portofolio Anda? Remix proyek Anda untuk membuat halaman portofolio yang spesial dan unik.

Remix →

Artikel ini merupakan terjemahan dan adaptasi dari konten blog resmi Framer ‘Engaging portfolio index pages to showcase your work’.