Paralaksu ritināšana ir vienkārša ar StickyStack.js

Paralakse ātri pievērsiet uzmanību. Šīs sekas saglabāt noteiktu fonu ritinot uz leju lapu. Jūs atradīsiet paralaksu ritināšanu daudzās tīmekļa vietnēs un WordPress tēmās, un tās ir liela daļa no modernā web dizaina.

Varat arī izveidot a unikāls paralakse izmantojot StickyStack.js iespraust. Tas ir balstīta uz jQuery un saglabā katru galveno lapu sadaļu uz augšu, ritinot uz leju.

Tas rada slāņveida tīmekļa vietnes ilūzija kur katra lapa “skursteņi” virs otra. Tas ir patiešām foršs un diezgan vienkārši uzstādāms.

Lai gan tas ir diezgan viegli uzstādāms, tas prasa zināmu priekšstatu par frontend attīstību.

Vispirms jums ir nepieciešams izveidot atsevišķas lapas sadaļas galvenajā traukā. Tādā veidā jums būs viss iekļauts HTML, lai jūs varētu mērķēt visu ar StickyStack jQuery funkciju.

Tas arī nāk ar dažām iespējām, kur var pielāgot mātes konteiners, the elementiem, kas jāapkopo, un iespējams kastes ēna ja jums tas patīk.

Lūk, a koda paraugu no GitHub lapas:

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

Lai gan tas nav atjaunināts aptuveni divus gadus, tas joprojām ir ļoti uzticams spraudnis. Tā strādāja visās pārbaudītajās pārlūkprogrammās (Chrome, Safari un Firefox) ar atbalsts visām jQuery versijām.

Plus, minified fails ir tikai 2KB kas ir pienācīgs lielums spraudnim.

Lai uzzinātu vairāk, apmeklējiet galveno repo un skatiet, ko var piedāvāt StickyStack. Es domāju, ka tas darbojas vislabāk vienas lapas tīmekļa vietnes vai galvenās lapas ar lielu pilnekrāna fonu.

Varat arī pārbaudīt a dzīvo demonstrāciju par CodePen ja vēlaties redzēt, kā tas izskatās tiešraidē.