Ilgos slinkimo vietos tapo tikrai bendra interneto dizaino tendencija. Vienas iš vėlesnių šio tipo pogrupių yra paralaksų slinkimo vietos, kuriose vaizdai pereina į paralakso efektą. Kai vartotojas slenka žemyn, animacijos išjungiamos ir iš esmės suteikia bet kokiai interneto svetainei naują išvaizdą.
Padaryti paralakso slinkimo svetainę dažnai yra varginantis, nes tam reikia išsamių žinių apie CSS, „Javascript“ ir gerą interneto dizainą. Čia yra sąrašas geriausių paralaksų slinkimo įskiepių, kurie ne tik padeda jums sukurti paralaksų slinkimo svetaines, bet ir gerai aprūpintą paralaksų efektų biblioteką, kad būtų lengviau ir greičiau sukurti gerą išvaizdą turintį tinklalapį. .
ATSAKOMYBĖ : Prieš pradedant, atkreipkite dėmesį, kad norint naudoti šiuos priedus, reikalingos žinios apie žiniatinklio technologijas (HTML / CSS / Javascript). Dauguma išvardytų įskiepių naudoja jquery, todėl žinios apie „Jquery“ taip pat gali būti reikalingos.
Paralaksų slinkimo papildiniai
1. ScrollMagic
ScrollMagic yra vienas iš populiariausių ir turtingiausių „jquery“ priedų. Tai yra „JavaScript“ biblioteka, leidžianti sukurti iš tikrųjų stebuklingus slinkties efektus. Naudodamiesi ScrollMagic galite animuoti pagal jūsų slinkties padėtį. Tai reiškia, kad galite pataisyti, perkelti ar animuoti HTML elementus, kai slenkate, nesvarbu, kokia trukmė norite, taip pat lengvai pridėkite paralakso efektą į savo svetainę. Jis yra labai pritaikomas ir taip pat lengvas (6kb, kai gzipped). Be kitų paralaksų slinkties priedų, Scroll Magic turi geriausius dokumentus ir išorinius išteklius. Jis puikiai suderinamas su mobiliuoju telefonu.
ScrollMagic turi daug pavyzdžių. Išbandykite juos, kad sužinotumėte, kaip naudotis šia biblioteka.
Apie:
Pagrindinis puslapis: //janpaepke.github.io/ScrollMagic/
Sukūrė: Jan Paepke
Diegimas:
1. CDN:
2. Atsisiųskite iš „Github“
2. skrollr
skrollr yra lengva „JavaScript“ ir „CSS“ biblioteka, kurioje nėra jQuery. Tai iš esmės yra „Scroll Magic supaprastinta CSS“. Norėdami naudoti skrollr, nereikia žinoti „Javascript“ ar jokio „jQuery“. Pakanka tik HTML ir CSS. skrollr naudoja duomenų atributus, kad animuotų bet kokį norimą HTML elementą. Vienas iš pagrindinių „skrollr“ trūkumų yra tas, kad animacijos veikia tik tada, kai puslapis yra slenkamas. Priešingu atveju visi efektai bus užlaikyti. skrollr leidžia animuoti visas HTML elementų CSS savybes.
Apie:
Pagrindinis puslapis: //prinzhorn.github.io/skrollr/
Sukūrė: Prinzhorn
Diegimas: Atsisiųskite iš „Github“
3. pagePiling.js 
„Page Piling“ yra „jQuery“ įskiepis, leidžiantis sukurti savo svetainę į skirtingas dalis, kurios krūva viena ant kitos. Kai slenkate arba pasiekiate URL, kiekviena sekcija atskleidžiama tvarkinga stumdoma animacija. pagePiling.js yra suderinama su visomis platformomis - darbalaukiu, planšetiniu kompiuteriu ir mobiliuoju telefonu - ir veikia su daugeliu naršyklių. Jis degraduoja gražiai senesnėse naršyklėse, kurios nepalaiko jo animacijų (pvz., IE 7). Norėdami naudoti papildinį, HTML kode turite įtraukti CSS ir „JavaScript“ failą. pagePiling.js inicijuojama (dokumento). jau funkcija:
$( document ).ready( function () {
$( ' #pagepiling ' ).pagepiling();
});
Išsamesniems inicijavimams pereikite per README.md.
Apie:
Pradinis puslapis: //alvarotrigo.com/pagePiling/
Sukūrė: alvarotrigo
Diegimas: Atsisiųskite iš „Github“
4. Alton
„Alton“ yra jQuery „slinkties kėlimo į mus“ papildinys. Slinkties kėlimas reiškia, kad jūsų naršyklės gimtoji slinktis yra išjungta naudodamiesi tiksliniu slinkimu, kuris, kai jis inicijuojamas (per pelės ratą arba jutiklinę plokštę), nukelia į kitą vertikalų tašką ekrane arba kito konteinerio viršų.
„Alton“ leidžia naudoti tris atskiras funkcijas: „Hero“, „Bookend“ ir „Standard“. Standartinis leidžia naudoti visą puslapio slinkimą, kiekvienas 100% aukštis. Slinkimas parodo kitą skyrių arba ankstesnį skyrių. „Bookend“ leidžia jums sukurti „bookend-kind“ patirtį, o „Hero“ leidžia naršyti lizdą tik „Hero“ skyriuje, o likęs puslapis turi (pakartotinai įjungtą) vietinį slinkimą.
Apie:
Pagrindinis: //paper-leaf.com/alton-jquery-scroll-jacking-plugin/
Sukūrė: popieriaus lapai
Diegimas: Atsisiųskite iš „Github“
5. Stellar.js
Žvaigždžių yra jQuery įskiepis, per kurį galite lengvai pridėti paralaksų slinkimo efektus. Norėdami paleisti, pirmiausia turite paleisti $ .stellar () funkciją. Atskirų elementų animacijos nustatymus galima konfigūruoti naudojant šio elemento duomenų atributus.
Žvaigždės netgi leidžia jums turėti paralakso fonus, kurie yra slinkties fone. Vienas iš naudingiausių „Stellar.js“ funkcijų yra kompensacijos.
Visi elementai grįš į savo pradinę padėtį, kai jų tėvai atitiks ekrano kraštą - plius arba atėmus savo pasirinktinį poslinkį. Tai leidžia jums lengvai sukurti sudėtingus paralakso modelius. (Žvaigždžių dokumentacija)
Apie:
Pagrindinis: //markdalgleish.com/projects/stellar.js/
Sukūrė: Mark Dalgeish
Diegimas: Atsisiųskite iš „Github“
6. multiScroll.js
Šis įskiepis sukurtas to paties kūrėjo (alvarotrigo), kuris sukūrė PagePiling.js įskiepį. Ką dažniausiai atlieka daugelis slinkčių, tai leidžia sukurti efektą, kai kiekvienos puslapio sekcijos apkrovos padalijamos į dvi dalis, kurios įstumia į vietą, kai įkeliami puslapiai. Patikrinkite pagrindinį puslapį, kad pamatytumėte, kaip tai atrodo jūsų naršyklėje. MultiScroll.js leidžia nustatyti slinkties greitį, palengvinti, klaviatūros slinkimo parinktį ir daug daugiau savybių, kad galėtumėte pritaikyti efektą būtent taip, kaip jums reikia.
Apie:
Pradinis puslapis: //alvarotrigo.com/multiScroll/
Sukūrė: alvarotrigo
Diegimas: Atsisiųskite iš „Github“
7. ScrollMe
„ScrollMe“ yra papildinys, skirtas papildyti paprastus paralaksų slinkimo efektus į jūsų puslapį. Naršydami žemyn, jis gali skaluoti, pasukti, versti ir keisti elementų neskaidrumą. „ScrollMe“ nereikalauja „Javascript“, o tik CSS žinios yra pakankamos. Pridėjus klasę „animateme“ ir reikiamus duomenų atributus, galite animuoti bet kokį HTML elementą. „ScrollMe“ geriausiai naudojamas pridedant CSS efektus. Jis yra lengvas ir visi animacijos sklandžiai, jei naudojate juos saikingai.
Apie:
Pradinis puslapis: //scrollme.nckprsn.com/
Sukūrė: Nick Pearson
Diegimas: Atsisiųskite iš „Github“
8. Paralakso slinkimas
Parallax Scroll yra paprastas naudoti jQuery įskiepis, leidžiantis sukurti paralakso vaizdo slinkimo efektą, kurį galima rasti tokiose svetainėse kaip „Spotify“. Tai gana paprasta naudoti - tiesiog nurodykite būtinas CSS klases vaizdų turėtojams. Užuot naudoję Žymos, norėdami naudoti šį papildinį, turite naudoti elementus, turinčius fono paveikslėlį (naudodami „CSS-image“ CSS savybę. Jūs galite padaryti elementus reaguojančius naudojant CSS @ media užklausas.
Apie:
Pagrindinis puslapis: //parallax-scroll.aenism.com/
Sukūrė: Aen
Diegimas: Atsisiųskite iš „Github“
9. Jarallax
„Jarallax“ yra „CSS“ ir „Javascript“ biblioteka, kuri specializuojasi paralaksų slinkimo efektu. Jarallax yra sukonfigūruotas naudojant „Javascript“ („No jQuery“, tik gryna vanilė JS). Jis palaiko išlygintas slinkimo funkcijas, palengvina ir paralaksų animaciją. „Jarallax“ palaiko dauguma naršyklių visose platformose. „Jarallax“ interneto svetainėje yra puikūs dokumentai, kaip pritaikyti „Jarallax“ jūsų poreikiams. „Jarallax“ taip pat turi vaizdo samouczku, rodančius, kaip įdiegti „Jarallax“ savo svetainėje ir kaip pradėti.
Apie:
Pagrindinis puslapis: //www.jarallax.com/
Sukūrė: Jarallax
Diegimas: Atsisiųskite iš „Jarallax“ svetainės
10. Superscrollorama
Superscrollorama - tai jQuery pagrįstas įskiepis, kuris palaiko slinkties animacijas. Jį maitina „TweenMax“ ir „Greensock Tweening Engine“, kuri padidina animaciją ir sklandumą. „Superscrollorama“ animacijos yra vadinamos „jQuery“, o taip pat galite naudoti daugumą „TweenMax.js“ funkcijų. Deja, mobilieji įrenginiai visiškai nepalaiko šių animacijų (nes jutiklinio ekrano įrenginiai rankena sukasi kitaip). Tačiau naudojant „setScrollContainerOffset“ metodą, „Superscrollorama“ efektai pasiekiami mobiliuosiuose įrenginiuose.
Čia yra kodas, kaip tai padaryti:
.setScrollContainerOffset(x, y)
(x: slinkties talpyklos x nuokrypis, y: x slinkties talpyklos poslinkis)
Apie:
Pagrindinis puslapis: //johnpolacek.github.io/superscrollorama/
Sukūrė: johnpolacek
Diegimas: Atsisiųskite iš „Github“
TAIP PAT ŽR. 10 geriausių statinių svetainių generatorių
