Skrol Parallax Made Easy Dengan StickyStack.js

Kesan paralaks ambil perhatian cepat. Kesan ini menjaga latar belakang tertentu dalam pandangan semasa menatal ke bawah halaman. Anda akan menemui tontonan paralaks di banyak laman web dan tema WordPress dan mereka sebahagian besar reka bentuk web moden.

Anda juga boleh membina gaya paralaks yang unik menggunakan StickyStack.js pasangkan. Ia dibina di jQuery dan mengekalkan setiap bahagian halaman utama dilekatkan ke bahagian atas seperti yang anda tatal ke bawah.

Ini mencipta ilusi laman web berlapis di mana setiap halaman “susunan” di atas yang lain. Ia sangat sejuk dan cukup mudah untuk ditubuhkan sendiri.

Walaupun ia cukup mudah untuk ditubuhkan, ia memerlukan sedikit pemahaman tentang perkembangan frontend.

Anda perlu terlebih dahulu buat bahagian halaman individu di dalam bekas utama. Dengan cara ini anda akan mempunyai semuanya disertakan dalam HTML, jadi anda boleh menyasarkan segala-galanya dengan fungsi jQuery StickyStack.

Ia juga dilengkapi dengan beberapa pilihan di mana anda boleh menyesuaikannya bekas ibu bapa, yang unsur yang harus disusun, dan mungkin kotak bayang-bayang jika anda suka kesan itu.

Inilah a bit sampel kod dari halaman GitHub:

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

Walaupun ini belum dikemas kini dalam masa dua tahun, ia masih merupakan plugin yang sangat dipercayai. Ia bekerja di semua pelayar yang saya uji (Chrome, Safari, & Firefox) dengan sokongan untuk semua versi jQuery.

Tambahan pula, fail minified adalah hanya 2KB yang merupakan ukuran yang baik untuk plugin.

Untuk mengetahui lebih lanjut, lawati repo utama dan lihat apa yang boleh ditawarkan oleh StickyStack. Saya fikir ia berfungsi dengan baik laman web satu halaman atau halaman pendaratan dengan latar belakang skrin penuh yang besar.

Anda juga boleh menyemak demo hidup pada CodePen jika anda mahu melihat bagaimana ia kelihatan di tapak hidup.