Parallaksirullaaminen helpoksi StickyStack.js n avulla

Parallaksivaikutukset tartu huomiota nopeasti. Nämä vaikutukset säilyttää tiettyjä taustoja selaamalla sivua alaspäin. Löydät parallaksia vierittämällä monilla verkkosivuilla ja WordPress-teemoilla ja ne ovat suuri osa modernia web-suunnittelua.

Voit myös rakentaa a ainutlaatuinen parallaksityyli käyttämällä StickyStack.js kytkeä. Sen rakennettu jQueryyn ja pitää jokaisen pääsivun osan kiinni yläreunassa, kun selaat alas.

Tämä luo illuusio kerrostetusta verkkosivustosta missä jokainen sivu “pinot” toisen päälle. Se on todella viileä ja melko helppo asentaa itse.

Vaikka se on melko helppo asentaa, se vaatii jonkin verran ymmärrystä frontend-kehityksestä.

Sinun täytyy ensin luo yksittäisiä sivuosioita pääsäiliön sisällä. Näin sinulla on kaikki suljettu HTML, joten voit kohdistaa kaiken StickyStack jQuery -toiminnon avulla.

Siinä on myös muutamia vaihtoehtoja, joilla voit muokata perussäiliö, elementtejä, jotka pitäisi pinota, ja mahdollinen laatikon varjo jos pidät tästä vaikutuksesta.

Tässä on a näyte bitti koodia GitHub-sivulta:

 $ ('. ); 

Vaikka tätä ei ole päivitetty noin kahden vuoden kuluttua, se on silti erittäin luotettava plugin. Se työskenteli kaikissa testatuissa selaimissa (Chrome, Safari ja Firefox) tuki jQueryn kaikille versioille.

Lisäksi minifioitu tiedosto on vain 2KB joka on kunnollinen koko pluginille.

Saat lisätietoja tutustumalla tärkeimpään repoon ja katso, mitä StickyStack voi tarjota. Mielestäni se toimii parhaiten yhden sivun sivustot tai aloitussivut, joissa on suuret koko näytön taustakuvat.

Voit myös tarkistaa a live-esittely CodePenissä jos haluat nähdä, miten tämä näyttää live-sivustossa.