Posúvanie parallaxu sa stáva jednoduchým pomocou StickyStack.js

Parallaxové účinky chytiť pozornosť rýchlo. Tieto účinky zachovať určité pozadie pri posúvaní stránky. Na mnohých webových stránkach a témach WordPress nájdete rolovanie paralaxy a sú veľkou súčasťou moderného webového dizajnu.

Môžete tiež vytvoriť jedinečný štýl paralaxy pomocou StickyStack.js zapojiť. to je postavený na jQuery a udržiava každú sekciu hlavnej stránky v priebehu posúvania nadol.

Tým sa vytvorí ilúzia vrstvenej webovej stránky kde každá stránka “komíny” na druhej strane. Je to naozaj super a veľmi jednoduché nastaviť sami.

Aj keď je to jednoduché nastaviť, vyžaduje si nejaké pochopenie vývoja frontendu.

Najprv musíte vytvoriť jednotlivé sekcie stránky vnútri hlavnej nádoby. Týmto spôsobom budete mať všetko uzavreté v HTML, takže môžete zamerať všetko pomocou funkcie jotky StickyStack.

To tiež prichádza s niekoľkými možnosťami, kde si môžete prispôsobiť rodičovský kontajner, prvky, ktoré by mali stack, a možné box tieň ak sa vám tento efekt páči.

Tu je a vzorový bit kódu z stránky GitHub:

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

Aj keď to nebolo aktualizované asi za dva roky, je to stále veľmi spoľahlivý plugin. to pracoval vo všetkých prehliadačoch, ktoré som testoval (Chrome, Safari a Firefox) s podpora pre všetky verzie jQuery.

Navyše, miniatúrny súbor je iba 2 kB čo je slušná veľkosť pre plugin.

Ak sa chcete dozvedieť viac, navštívte hlavnú repo a uvidíte, čo môže spoločnosť StickyStack ponúknuť. Myslím, že to najlepšie funguje webových stránok s jednou stránkou alebo vstupné stránky s veľkým pozadím na celej obrazovke.

Môžete si tiež pozrieť a živé demo na CodePen ak chcete vidieť, ako to vyzerá na živom webe.