„Parallax“ slinkimas lengvas „StickyStack.js“

Paralakso poveikis greito dėmesio. Šie poveikiai išlaikyti tam tikrą foną naršydami žemyn. Rasite paralaksų slinkimą daugelyje svetainių ir „WordPress“ temų ir jie yra didelė dalis šiuolaikinio interneto dizaino.

Taip pat galite sukurti a unikalus paralakso stilius naudojant StickyStack.js prijungti. Tai pastatytas ant jQuery ir saugo kiekvieną pagrindinio puslapio skiltį į viršų, kai slinkite žemyn.

Tai sukuria sluoksniuotos svetainės iliuzija kur kiekvienas puslapis “kaminai” ant kitos. Tai tikrai kietas ir gana paprasta nustatyti savo.

Nors tai gana paprasta įdiegti, tam reikia tam tikro „frontend“ kūrimo supratimo.

Pirmiausia reikia sukurti atskirus puslapių skyrius pagrindinio konteinerio viduje. Taip turėsite viskas įtraukta į HTML, todėl galite nukreipti viską su „StickyStack“ jQuery funkcija.

Jame taip pat yra kelios parinktys, kuriose galite tinkinti pirminis konteineris, elementai, kurie turėtų sukrauti, ir įmanoma langelio šešėlis jei jums patinka šis efektas.

Štai a kodo pavyzdys iš „GitHub“ puslapio:

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

Nors tai nebuvo atnaujinta per dvejus metus, tai vis dar yra labai patikimas įskiepis. Tai dirbo visose išbandytose naršyklėse („Chrome“, „Safari“ ir „Firefox“) su parama visoms jQuery versijoms.

Be to, minifikuotas failas yra tik 2KB kuris yra tinkamas įskiepio dydis.

Jei norite sužinoti daugiau, apsilankykite pagrindiniame repo ir pažiūrėkite, ką gali pasiūlyti „StickyStack“. Manau, kad tai geriausiai veikia vieno puslapio puslapiai arba nukreipimo puslapius su dideliu viso ekrano fonu.

Taip pat galite patikrinti a gyva demonstracija „CodePen“ jei norite pamatyti, kaip tai atrodo tiesioginėje svetainėje.