Apa itu Parallax Scrolling?

Pernahkah Anda merasa seperti terhisap ke dalam halaman ketika mengunjungi sebuah situs web? Pengalaman itu dihasilkan oleh parallax scrolling. Teknik ini membuat elemen latar belakang bergerak lebih lambat daripada elemen depan untuk menciptakan kesan tiga dimensi yang halus.

Berkat pembuat situs web masa kini seperti Framer, sekarang Anda dapat dengan mudah mengimplementasikan pengalaman interaktif dan mendalam ini tanpa harus menulis kode. Selanjutnya, kita akan melihat 8 contoh parallax dinamis yang diwujudkan dengan Framer, serta memperkenalkan kepada Anda 5 tip terbaik yang dapat diterapkan dalam desain Anda.

1. The TinyPod

TinyPod merupakan situs web yang memperkenalkan produk yang membuat Apple Watch tanpa strap terlihat seperti ponsel minimalis mirip iPod. Ketika digulir, produk ini bisa dilihat dari segala arah, dan di tengah halaman, TinyPod berputar seolah-olah dipegang, menvisualisasikan tagline "Everything you need in the palm of your hand." Pengaturan canggih ini tidak hanya menonjolkan fitur utama produk tetapi juga meningkatkan keterlibatan dengan membuat Anda ingin terus menggulir hingga tujuan akhir halaman tercapai.

Lihat situs web

2. Mars Rejects

Situs Mars Rejects yang terdiri dari 10,000 karakter NFT menggunakan grafik header yang sangat mengesankan. Header situs web ini memiliki grafik menawan yang bergerak secara horizontal. Saat menggulir, grafik bergerak ringan ke depan, latar berubah menjadi merah menyala, dan teks header ditempatkan di tengah. Efek parallax digunakan secara efektif dalam bagian penceritaan. Saat Anda menggulir cerita Mars Rejects, kartu teks akan muncul dan gambar latar bergerak sedikit ke depan dan berubah. Pendekatan ini meningkatkan keterlibatan pengguna, menambah kedalaman pada cerita Mars Rejects setiap kali Anda menggulir.

Lihat situs web

3. Unifiers of Japan

Situs web "Unifiers of Japan" memanfaatkan parallax scrolling dengan mahir untuk menyampaikan kisah Oda Nobunaga, pahlawan pertama Jepang yang bersatu. Saat menggulir, cerita tentang daimyo kuat yang menggulingkan shogun Ashikaga dan mengakhiri konflik feodal yang panjang di Jepang terungkap. Situs web dimulai dengan grafik header yang secara bertahap mengubah Oda menjadi samurai yang gagah berani, memberikan kesan seolah-olah mengundang pengunjung masuk ke dalam cerita tersebut.

Efek gulir halus dari situs ini membuat perjalanan sejarah ini menjadi lebih immersif. Ini adalah contoh sempurna dari bagaimana parallax scrolling dapat meninggalkan kesan mendalam, memfasilitasi pengunjung untuk menikmati catatan sejarah ini sebagai pengalaman menarik.

Lihat situs web

4. Punkt

Situs Punkt dimulai dengan ilustrasi amplop yang miring ke atas sebelum menghilang. Animasi sederhana ini membantu mengatur nada cerita yang ingin disampaikan di situs ini, khususnya tantangan yang dihadapi oleh desainer UX.

Ketika Anda terus menggulir, garis muncul di latar depan dan teks "Chaos everywhere" di latar belakang perlahan menghilang. Penggunaan kreatif dari parallax scrolling tidak hanya memicu minat pengunjung, tetapi juga menunjukkan seberapa jelas Plattform Punkt menciptakan situs web yang mencolok secara visual.

Lihat situs web

5. Disco Dungeon

Situs web Disco Dungeon memperkenalkan tema RPG puzzle berbasis giliran yang akan datang. Dimulai dengan grafik yang mengesankan dari protagonis game yang melayang saat digulir. Kemudian, saat Anda menggulir ke bawah, karakternya turun ke bawah seolah menjelajahi bagian terdalam dari penjara bawah tanah, yang sesuai dengan tema permainan.

Pendekatan interaktif ini menjaga minat pengunjung, membuat mereka merasa seperti sedang mengalami permainan hanya dengan menggulir. Setiap bagian dari situs ini terasa seperti level baru dari penjara bawah tanah, dengan karakter selalu menjadi pusat yang membawa petualangan.

Lihat situs web

6. Cancel Culture

Proyek ‘Cancel Culture’ menggunakan parallax scrolling untuk menghadirkan pengalaman penceritaan yang imersif. Saat menjelajahi situs ini, konten utama muncul di depan, sementara elemen latar belakang seperti reaksi dari masyarakat atau komentar perlahan terlihat. Layering dinamis ini menciptakan narasi visual yang membantu menjaga keterlibatan penonton.

Setiap bagian dari situs ini menggunakan efek parallax untuk menambah kedalaman dan konteks, menjadikan penceritaan lebih menarik. Situs ini menunjukkan secara sempurna bagaimana parallax scrolling memperkuat konten berbasis teks, meningkatkan keseluruhan pengalaman menjadi lebih kaya.

Lihat situs web

7. i‑D

Situs iD, platform global yang mendalami fashion, budaya, dan ekspresi diri, menggunakan parallax scrolling secara visual dan menawan. Saat menggulir, foto-foto artistik bergerak dinamis, menyoroti area fokus merek pada seni gambar, fashion, kecantikan, dan musik. Gerakan detail ini menambahkan kedalaman pada situs, lebih menarik pengunjung untuk menjelajahi dunia kreatif dari situs ini.

Desain yang menggunakan elemen visual dan gerakan alih-alih teks yang berat, menekankan identitas merek i-D, menyampaikan pesan dengan gaya dan intensitas melalui gambar dan efek.

Lihat situs web

8. Helium Mobile

Saat menggulir halaman promo 'Golden Goose' dari Helium Mobile, teks menonjolkan poin utama dan dinamika gerakan latar belakang awan menciptakan pengalaman visual yang menarik. Penggunaan parallax ini memandu jelajah halaman secara alami. Parallax scrolling ini membuat halaman lebih menarik, mendorong pengunjung untuk terus menjelajahi situs dan mempelajari lebih lanjut tentang promosinya.

Lihat situs web

5 Tips untuk Menerapkan Parallax di Framer

Parallax scrolling bisa terasa rumit, terutama jika Anda tidak familier dengan coding. Namun, dengan Framer, hal ini sangat mudah. Anda dapat menciptakan efek yang memikat dengan hanya beberapa kali klik. Berikut adalah beberapa tips untuk membantu Anda menerapkan parallax scrolling di Framer. Gunakan tips ini untuk memastikan desain Anda terlihat memukau dan berfungsi dengan lancar.

1. Memahami Layer dan Gerakan

Pemahaman dasar parallax scrolling di Framer adalah tentang memanfaatkan layer dan mengendalikan gerakan layer. Mulailah dengan membangun desain menggunakan beberapa layer yang mewakili elemen yang berbeda seperti latar belakang, tengah, dan latar depan. Di Framer, Anda bisa menganimasikan layer ini dengan kecepatan berbeda untuk menciptakan kesan kedalaman saat pengguna menggulung. Yang penting adalah gerakan halus. Terlalu banyak gerakan dapat membuat pengguna merasa terganggu.

2. Menggunakan Pemicu Gulir

Salah satu fitur terkuat Framer adalah kemampuannya untuk membuat animasi pemicu gulir. Artinya, Anda bisa mengatur aksi tertentu untuk terjadi saat pengguna menggulir ke bagian tertentu halaman. Sebagai contoh, animasikan layer untuk bergerak ke atas saat pengguna menggulir ke bawah, atau buat elemen terungkap secara bertahap ketika muncul di pandangan. Teknik ini sangat penting untuk menciptakan efek parallax yang menawan.

3. Menyesuaikan Kecepatan dan Waktu Tunda

Untuk mendapatkan efek waktu tunda yang halus dan elegan, perhatikan pemulusan kecepatan animasi Anda. Framer memungkinkan penyesuaian yang halus dari elemen-elemen ini, sehingga elemen bergerak dengan cara yang alami dan menawan. Umumnya, layer latar belakang bergerak lebih lambat daripada layer latar depan, memperkuat efek 3D yang membuat parallax scrolling lebih menarik.

4. Mengintegrasikan Elemen Interaktif

Menambah elemen seperti respons animasi saat melayang, atau ekspansi konten saat diklik dapat meningkatkan keterlibatan. Misalnya, buat efek melayang yang memicu animasi tambahan ketika pengguna mengakses halaman, atau tambahkan area klik yang memungkinkan untuk membuka konten lebih lanjut. Dengan cara ini, desain tidak hanya terlihat lebih dinamis, tetapi juga memandu navigasi pengguna, meningkatkan partisipasi mereka.

5. Menguji di Berbagai Perangkat

Periksa perbedaan perilaku parallax antara desktop dan ponsel, dan optimalkan dengan fitur pratinjau Framer. Terutama untuk ponsel, pertimbangkan performa dan UX untuk menyederhanakan elemen parallax.

Kesimpulan

Dengan Framer, Anda tidak hanya dapat merancang situs web yang indah, tetapi juga menciptakan pengalaman interaktif yang menarik. Efek parallax bisa menambahkan kedalaman dan dinamika pada situs, membuat kesan yang tak terlupakan. Cobalah terapkan parallax scrolling dalam proyek Anda sendiri, terinspirasi dari contoh-contoh di atas. Jika ingin menjelajahi kemungkinan yang lebih kreatif, kunjungi galeri untuk melihat berbagai situs web interaktif, dan beri semangat pada desain web animasi Anda.

Artikel ini adalah terjemahan dan adaptasi dari konten '8 professional parallax techniques: performance-optimized depth experiences' di blog resmi Framer.