Pengguliran Parallax Menjadi Mudah Dengan StickyStack.js

Efek paralaks raih perhatian dengan cepat. Efek ini menjaga latar belakang tertentu tetap terlihat sambil menggulir ke bawah halaman. Anda akan menemukan scroll paralaks pada banyak situs web dan tema WordPress dan itu sebagian besar dari desain web modern.

Anda juga dapat membangun a gaya paralaks yang unik menggunakan StickyStack.js plugin. Nya dibangun di atas jQuery dan menjaga setiap bagian halaman utama dilekatkan ke atas saat Anda menggulir ke bawah.

Ini menciptakan ilusi situs web berlapis dimana setiap halaman “tumpukan” di atas yang lain. Ini sangat keren dan sangat mudah untuk diatur sendiri.

Meskipun cukup mudah untuk diatur, itu memang membutuhkan pemahaman tentang pengembangan frontend.

Anda harus terlebih dahulu buat bagian halaman individual di dalam wadah utama. Dengan cara ini Anda akan memilikinya semuanya terlampir dalam HTML, sehingga Anda dapat menargetkan semuanya dengan fungsi jQuery StickyStack.

Ini juga dilengkapi dengan beberapa opsi di mana Anda dapat menyesuaikan wadah induk, itu elemen yang harus ditumpuk, dan mungkin bayangan kotak jika Anda suka efek itu.

Ini a contoh sedikit kode dari halaman GitHub:

 $ ('. main-content-wrapper'). stickyStack (containerElement: '.main-content-wrapper', susunElement: 'section', boxShadow: '0 -3px 20px rgba (0, 0, 0, 0.25)' ); 

Meskipun ini belum diperbarui dalam waktu sekitar dua tahun, itu masih merupakan plugin yang sangat andal. Saya t bekerja di semua browser yang saya uji (Chrome, Safari, & Firefox) dengan dukungan untuk semua versi jQuery.

Plus, file yang diperkecil adalah hanya 2KB yang merupakan ukuran yang layak untuk sebuah plugin.

Untuk mempelajari lebih lanjut, kunjungi repo utama dan lihat apa yang dapat ditawarkan StickyStack. Saya pikir itu bekerja paling baik situs web satu halaman atau halaman arahan dengan latar belakang layar penuh yang besar.

Anda juga dapat melihat a live demo di CodePen jika Anda ingin melihat tampilannya di situs langsung.