„JavaScript“ bibliotekos „Cool Scrolling Effects“
Svetainės dizainas ateina į gyvenimą su gerai įvykdyta animacija. Jei ieškote tinkamų bibliotekų, kad pridėtumėte efektus savo projektui, čia pateikiau kai kurių bibliotekų sąrašą galite naudoti efektams, susijusiems su slinkties įvykiu.
Kai vartotojas slenka žemyn jūsų tinklalapį, veiksmas gali būti sukurta taip, kad suaktyvintų įvairias animacijos parinktis pavyzdžiui, išnyks efektai, neryškumas, 3D, paralaksas ir kt. Čia yra 25 JS bibliotekos, kurios gali padėti jums pasiekti tokį atsakymą į savo svetainės dizainą.
Slinkite Atskleisti
Biblioteka, leidžianti lengvai pridėti slinkties animaciją ir žiniatinklyje, ir mobiliesiems. Galite nustatyti pasirinktinį palengvinimą, 3D sukimą, trukmę ir daugelį mor parametrų, kuriuos norite animuoti.
Priklausomybės: nėra | Dydis: 2.9kb | Licencija: MIT
Aniview
Įskiepis, kuris veikia kartu su „Animate.CSS“ ir įgalina animacijas tik tada, kai jūsų elementas patenka į peržiūros sritį.
Priklausomybės: jQuery | Dydis: 1kb | Licencija: Nėra
Fade Into View
Įskiepis, kuris prideda išnykimo / išjungimo efektą elementams, kai jie įveda ar išeina iš iš anksto nustatytų peržiūros vietų.
Priklausomybės: jQuery | Dydis: 3.81kb | Licencija: Nėra
OHO
WOW atskleidžia Animate.css animacijas po slinkties įvykio. Galite nustatyti animacijos trukmę, vėlavimus, kompensacijas ir iteracijas tiesiai iš HTML žymėjimo, tada tiesiog skambinkite į elemento klasę iš JS.
Priklausomybės: Animate.css | Dydis: 8.23kb | Licencija: MIT
ScrollMagic
Šis papildinys parodys „Magišką“ efektą, kai vartotojas slenka puslapį. Tai puikiai tinka animacijai, elemento pritvirtinimui arba CSS klasės perjungimui. ScrollMagic gali dirbti kartu su GSAP ir VelocityJS kuriant animacinę sceną. Čia rasite išsamius demo.
Priklausomybės: jQuery, GSAP, Velocity.js | Dydis: 16.9kb | Licencija: MIT
jScrollability
jScrollability leidžia sukurti atskirus tinklalapius su sudėtingomis animacijomis. Pasibaigus naudotojui, elementas bus animuotas pagal slinkties pozicijas. Animacijos vykdomos pagal slinkties gylį, ir, žinoma, galite nustatyti animacijos pradžią ir pabaigą.
Priklausomybės: jQuery | Dydis: 1.86kb | Licencija: MIT
pushIn.js
Paprasta biblioteka, kurioje pridedamas „dolly-in“ arba „push-in“ efektas bet kuriam elementui, kuris veikia, kai vartotojas slenka per puslapį. Tai lengva įdiegti: tiesiog pridėkite starto, stabdymo ir greičio parametrus duomenų params į HTML elementą.
Priklausomybės: nė vienas | Dydis: 4.94kb | Licencija: Nėra
Scrollissimo
Tai yra JS biblioteka, skirta pridėti sklandžiai valdomas animacijas. Ji naudoja „Greensock“ „tweens“ ir terminus, kad būtų sukurtos sklandesnės animacijos.
Priklausomybės: GreenShock TweenLite / TweenMax | Dydis: 2.94kb | Licencija: Nėra
jQuery animacijos slinkties papildinys
Tai „jQuery“ įskiepis, kuriuo „Greensock“ pridedama „viewport“ suaktyvinta animacija. Tai leidžia lengvai suaktyvinti elementus su palengvinimu, transformavimu, mastu, rotacija ir 3D animacijomis.
Priklausomybės: jQuery, GreenShock | Dydis: 14kb | Licencija: GNU GPL
Circlr
„Circlr“ leidžia sukurti sukimosi animaciją elementui, kurį sukelia slinkimas, pelės įvykiai arba liesti įvykiai. Tai puikiai tinka gaminio, kuris gali būti peržiūrėtas iš visų 360 laipsnių, vitrina, suaktyvinama vartotojo slinkties pagalba.
Priklausomybės: nė vienas | Dydis: 6.05kb | Licencija: MIT
Scrollimator
„Scrollimator“ parodys poziciją ir slinkties pažangą bei grąžins vertes, kurias galite naudoti, jei norite keisti susietą animaciją, pridedamą prie vartotojo slinkimo elgesio. Jis palaiko vertikalų ir horizontalų slinkimą.
Priklausomybės: nė vienas | Dydis: 37,7kb | Licencija: Nėra
Crossfade
„Crossfade“ yra papildinys, skirtas pridėti „crossfade“ efektą vaizdui. Neryškus efektas tęsis, kai naudotojas slenka toliau.
Priklausomybės: jQuery | Dydis: 3.19kb | Licencija: MIT
Puslapio slinkimo efektas
Tai yra CodyHouse sukurtos eksperimentinių puslapių slinkimo efektų biblioteka. Jis naudoja velocitey.js animacijos.
Priklausomybės: jQuery, Velocity.js | Dydis: 17.6kb | Licencija: Nėra
jquery.parallax-scroll
Ši biblioteka leidžia pridėti sklandų paralakso efektą vertikaliam puslapių slinkimui. Tiesiog importuokite jQuery ir jquery.easing.1.3.js, tada pridėkite „duomenų paralaksas“ atributas ir neprivalomi parametrai jūsų elementui, kad pritaikytumėte efektą.
Priklausomybės: jQuery, jQuery.easing | Dydis: 8.72kb | Licencija: GNU GPL
parallax.js
„Parallax.js“ yra paprastas įskiepis, kuris papildo paralakso slinkimo efektą, įkvėptą „Spotify“ svetainėje.
Priklausomybės: jQuery | Dydis: 6.63kb | Licencija: MIT
Enllax
Enllax yra itin lengva biblioteka, skirta paralakso efektui pritaikyti bet kuriam slinkimo elementui. Galite nustatyti foninius ar priekinių elementų elementus, kad jie veiktų. Jis veikia tiek vertikaliai, tiek horizontaliai.
Priklausomybės: jQuery | Dydis: 1,53kb | Licencija: MIT
Blur slinkties metu
Ši biblioteka padeda pridėti vaizdui neryškius efektus, kuriuos sukels puslapio slinkimas. Kuo giliau slinkite žemyn, tuo daugiau neryškus vaizdas.
Priklausomybės: nė vienas | Dydis: 1.1kb | Licencija: Nėra
boxLoader
boxLoader yra paprastas įskiepis elementų įkėlimui į puslapio slinkimą. Nustatomas parametras yra kryptys (x arba y), padėtis procentais, poveikis ir trukmė.
Priklausomybės: jQuery | Dydis: 3.42kb | Licencija: Nėra
Pakreipta puslapio slinkimas
Kai vartotojas slenka per puslapį, šis įskiepis atskleis nuostabų 3D pasvirusį efektą nustatytam elementui.
Priklausomybės: jQuery | Dydis: 1.5kb | Licencija: GNU GPL
AhRelax
„AhRelax“ suteikia būdą, kaip padaryti greitai sukurtus animacijas. Tai labai didelis svoris ir puikiai veikia. Daugiau apie tai galite skaityti čia.
Priklausomybės: jQuery | Dydis: 1.6kb | Licencija: MIT
„Fancy Scroll“
Jei kada nors matote „Android“ ar „iOS“ perpildymo slinkties efektą, šį papildinį dabar galite taikyti savo svetainėje. Jei vartotojas pasiekia puslapio viršuje / apačioje, galite pridėti animaciją, kuri yra šokinėti arba švyti.
Priklausomybės: jQuery | Dydis: 2.64kb | Licencija: GNU GPL
Paralakso vaizdo slinkimas
Šis įskiepis leis elementams plaukti ir judėti, kai vartotojas slenka žemyn arba aukštyn.
Priklausomybės: jQuery | Dydis: 8.69kb | Licencija: MIT
Rlsmooth
Tai yra nedidelis įskiepis, kad būtų sukurtas tekantis efektas, kai vartotojas nusileidžia žemyn arba aukštyn. Galimi trys efektai: skaidrė, išnykimas ir rodymas.
Priklausomybės: jQuery | Dydis: 1.95kb | Licencija: MIT
Scrollme
Įtraukia paprastus efektus į puslapio slinkimą, pvz., Skalę, pasukimą, vertimą ir elementų neskaidrumo keitimą. Tai lengva nustatyti: tiesiog importuokite jQuery, šį papildinį ir nustatykite animacijos parametrus elemento žymėjime.
Priklausomybės: jQuery | Dydis: 5.45kb | Licencija: Nėra
Paralaksas ImageScroll
Šis įskiepis leidžia jums paralaksinį efektą suteikti bet kuriam jūsų puslapio vaizdui. Jis naudoja CSS3 transformaciją, kad padarytų poveikį. Šis įskiepis palaiko jQuery ir AMD.
Priklausomybės: jQuery | Dydis: 8.01kb | Licencija: MIT
