A parallaxis görgetés egyszerűvé vált a StickyStack.js használatával

Parallaxis hatások gyorsan megragadja a figyelmet. Ezek a hatások megtartani bizonyos háttereket lapozás közben. A parallaxist számos webhelyen és a WordPress témákban görgetve találja, és a modern webdesign nagy része.

Ön is épít egy egyedi parallaxis stílus használni a StickyStack.js csatlakoztat. ez a jQuery-re épült és megtartja az egyes főoldalrészeket a lap tetejére, amikor lefelé görget.

Ez létrehozza a egy rétegelt weboldal illúziója ahol minden oldal “halom” a másik tetején. Ez tényleg hűvös és nagyon könnyen beállítható.

Bár elég könnyű beállítani, megköveteli a frontend fejlesztésének bizonyos megértését.

Először is kell egyedi oldalrészek létrehozása a fő tartály belsejében. Így lesz mindent, amit a HTML tartalmaz, így célozhat mindent a StickyStack jQuery funkcióval.

Néhány opcióval is rendelkezik, ahol testreszabhatja a szülő tartály, a elemek, amelyeknek halmozniuk kell, és egy lehetséges doboz árnyék ha tetszik ez a hatás.

Itt van egy minta-bit kód a GitHub oldalról:

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

Bár ez körülbelül két év alatt nem frissült, ez még mindig nagyon megbízható plugin. Azt minden tesztelt böngészőben dolgozott (Chrome, Safari és Firefox) a jQuery összes verziójának támogatása.

Plusz, a tömörített fájl csak 2KB amely egy pluginhez megfelelő méret.

Ha többet szeretne megtudni, látogassa meg a fő repót, és nézze meg, mit kínál a StickyStack. Azt hiszem, a legjobban működik egyoldalas weboldalak vagy nagy képernyős háttérrel rendelkező céloldalak.

Azt is megnézheti a élő demó a CodePen-en ha látni szeretné, hogyan néz ki egy élő webhelyen.