Parallaaksi kerimine hõlpsasti StickyStack.js abil

Parallaksi mõju haarake tähelepanu kiiresti. Need mõjud hoida teatud taustasid lehekülje sirvimise ajal. Leiad parallaksi kerimise paljudes veebisaitides ja WordPress teemadel ning nad on suur osa kaasaegsest veebidisainist.

Samuti saate ehitada a unikaalne parallaksi stiil kasutades StickyStack.js sisse panema. See on ehitatud jQueryle ja hoiab iga lehekülje osa kleepunud ülespoole allapoole.

See loob kihilise veebisaidi illusioon kus iga lehekülg “korstnad” teise peale. See on tõesti lahe ja üsna lihtne seadistada.

Kuigi see on üsna lihtne seadistada, vajab see mõningast arusaamist esikülje arengust.

Sa pead kõigepealt luua üksikuid leheküljeosi peamahutisse. Nii saate kõike, mis on HTML-i sees, nii saate sihtida kõike StickyStack jQuery funktsiooniga.

Kaasas mõned võimalused, mille abil saate kohandada põhikonteiner, the elemendid, mis peaksid virnama, ja võimalik kasti vari kui sulle meeldib see efekt.

Siin on a proovi natuke koodi GitHubi lehelt:

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

Kuigi seda ei ole umbes kahe aasta jooksul uuendatud, on see siiski väga usaldusväärne plugin. See töötas kõikides testitud brauserites (Chrome, Safari ja Firefox) koos toetus kõigile jQuery versioonidele.

Pluss, kaevandatud fail on ainult 2KB mis on plugina korralik suurus.

Lisateabe saamiseks külastage peamist repot ja vaadake, mida StickyStack pakub. Ma arvan, et see toimib kõige paremini ühe lehekülje veebilehed või suurte täisekraaniga taustaga leheküljed.

Samuti saate vaadata a live demo CodePenis kui sa tahad näha, kuidas see live-saidil näeb.