JavaScripti raamatukogud jahedate kerimisefektide jaoks
Veebilehe kujunduse elluviimine toimub hästi teostatud animatsiooniga. Kui otsite õigeid raamatukogusid, et lisada oma projektile mõjusid, olen siin mõnede raamatukogude loendi saate kasutada kerimise sündmusel põhinevaid efekte.
Kui kasutaja sirvib teie veebilehte alla, siis toiming saab kujundada mitmesuguste animatsioonivõimaluste käivitamiseks nagu näiteks fadeefektid, hägusus, 3D, parallaks ja palju muud. Siin on 25 JS raamatukogut, mis aitavad teil sellist vastust oma saidi kujunduses saavutada.
Kerige esile
Raamatukogu, mis võimaldab kerida animatsioone nii veebi kui ka mobiili jaoks. Saate seadistada kohandatud leevendust, 3D-pöörlemist, kestust ja paljusid parameetreid, mida soovite animeerida.
Sõltuvus: ükski | Suurus: 2.9kb | Litsents: MIT
Aniview
Lisandmoodul, mis töötab koos Animate.CSS-iga, et võimaldada animatsioone ainult siis, kui teie element on vaateavas.
Sõltuvus: jQuery | Suurus: 1kb | Litsents: N / A
Fade Into View
Lisandmoodul, mis lisab elementidele fade in / out efekti, kui nad sisenevad või väljuvad eelnevalt määratud vaatlusportidest.
Sõltuvus: jQuery | Suurus: 3.81kb | Litsents: N / A
WOW
WOW avab Animate.css animatsioone kerimise korral. Animatsiooni kestust, viivitusi, nihkeid ja iteratsioone saate seadistada kohe HTML-märgistuselt, seejärel helistage elemendi klassi JS-lt.
Sõltuvus: Animate.css | Suurus: 8.23kb | Litsents: MIT
ScrollMagic
See plugin kuvab "Magical" efekti, kui kasutaja kerib lehekülge. See sobib ideaalselt animatsiooni, elementide kinnitamiseks või CSS-klassi ümberlülitamiseks, mis kõik põhinevad kerimispositsioonil. ScrollMagic võib koos GSAP-i ja VelocityJS-iga töötada koos animatsiooniga. Vaadake siin kõiki demosid.
Sõltuvus: jQuery, GSAP, Velocity.js | Suurus: 16.9kb | Litsents: MIT
jScrollability
jScrollability võimaldab teil luua ühtseid veebilehti keeruliste kerimisega animatsioonide abil. Kasutaja sõidu ajal animeerib element kerimispositsioonide põhjal. Animatsioonid töötavad sirvimissügavuse alusel ja loomulikult saate määrata animatsiooni alguse ja lõpu.
Sõltuvus: jQuery | Suurus: 1.86kb | Litsents: MIT
pushIn.js
Lihtne raamatukogu, mis lisab dolly-in või push-in efekti mis tahes elemendile, mis toimib siis, kui kasutaja sirvib lehekülge. See on lihtne rakendada: lihtsalt lisage algus-, peatus- ja kiirusparameetrid parameetrid oma HTML-elementi.
Sõltuvus: mitte ükski | Suurus: 4.94kb | Litsents: N / A
Scrollissimo
See on JS-raamatukogu, mis lisab sujuvalt kontrollitud animatsioone. See kasutab sujuvamaid animatsioone genereerivaid Greensocki tweese ja ajakavasid.
Sõltuvus: GreenShock TweenLite / TweenMax | Suurus: 2.94kb | Litsents: N / A
jQuery Animatsiooni kerimise plugin
See on jQuery plugin, mille abil saab lisada Greensocki abil vaateava käivitatud animatsiooni. See lihtsustab elementide animeerimist lihtsustamise, muutmise, skaala, pöörlemise ja 3D-animatsioonidega.
Sõltuvus: jQuery, GreenShock | Suurus: 14kb | Litsents: GNU GPL
Circlr
Circlr võimaldab teil luua pööramise animatsiooni elemendile, mille käivitab kerimine, hiire sündmused või puudutavad sündmused. See on ideaalne, et valmistada toodet, mida saab vaadata kõigilt 360 kraadilt, aktiveerituna kasutaja sirvimise abil.
Sõltuvus: mitte ükski | Suurus: 6.05kb | Litsents: MIT
Scrollimator
Scrollimator näitab sulle positsiooni ja liikumise edenemist ning tagastab väärtused, mida saate kasutada kasutaja sirvimiskäitumisega seotud kahe animatsiooni muutmiseks. See toetab vertikaalset ja horisontaalset kerimist.
Sõltuvus: mitte ükski | Suurus: 37,7kb | Litsents: N / A
Crossfade
Crossfade on plugin, mis lisab pildile ristfadeefekti. Hägune efekt jätkub, kui kasutaja allapoole kerib.
Sõltuvus: jQuery | Suurus: 3.19kb | Litsents: MIT
Lehekülje kerimise efekt
See on raamatukogu CodyHouse'i loodud eksperimentaalsete lehekülje kerimise efektide jaoks. Seda kasutatakse velocitey.js animatsioone.
Sõltuvus: jQuery, Velocity.js | Suurus: 17,6kb | Litsents: N / A
jquery.parallax-scroll
See raamatukogu võimaldab teil lisada vertikaalsete lehekülgede kerimiseks parallaaksi. Lihtsalt importige jQuery ja jquery.easing.1.3.js, seejärel lisage "parallaks" atribuut ja valikulised parameetrid teie elemendile, et kohandada efekti.
Sõltuvus: jQuery, jQuery.easing | Suurus: 8.72kb | Litsents: GNU GPL
parallax.js
Parallax.js on lihtne plugin, mis lisab parallaksi kerimise efekti, inspireeritud Spotify veebisaidilt.
Sõltuvus: jQuery | Suurus: 6.63kb | Litsents: MIT
Enllax
Enllax on super kerge raamatukogu, mida kasutatakse parallaksi efekti rakendamiseks mis tahes kerimiselemendile. Saate seada tausta või esiplaani elemente eetiliseks efektiks. See töötab nii vertikaalseks kui ka horisontaalseks kerimiseks.
Sõltuvus: jQuery | Suurus: 1,53kb | Litsents: MIT
Blur kerides
See raamatukogu aitab teil lisada pildile hägususe efekti, mis käivitub lehe kerimise teel. Mida sügavamal lehel allapoole liigute, seda rohkem muutub pilt häguseks.
Sõltuvus: mitte ükski | Suurus: 1.1kb | Litsents: N / A
boxLoader
boxLoader on lihtne plugin elementide sirvimisel elementide laadimiseks. Parameeter, mida peaksite määrama, on juhised (x või y), positsioon protsentides, efekt ja kestus.
Sõltuvus: jQuery | Suurus: 3.42kb | Litsents: N / A
Kallutatud lehe kerimine
Kui kasutaja sirvib lehekülge läbi, näitab see plugin teie poolt loodud elemendile fantastilist 3D kallutatud efekti.
Sõltuvus: jQuery | Suurus: 1.5kb | Litsents: GNU GPL
AhRelax
AhRelax pakub võimalust kiirete kerimisega animatsioonide tegemiseks. See on suur kaal ja ka suur jõudlus. Lisateavet saate siit.
Sõltuvus: jQuery | Suurus: 1.6kb | Litsents: MIT
Fancy Scroll
Kui näete Android või iOS-i ülevoolu kerimise efekti, saate selle pluginaga nüüd oma saidile rakendada. Kui kasutaja jõuab lehe ülemise / alumise osa peale, võite lisada animatsiooni, kas põrgatama või helendama.
Sõltuvus: jQuery | Suurus: 2,64 kb | Litsents: GNU GPL
Parallaaksi pilt kerib
See plugin muudab elemendid hõljuvaks ja liiguvad, kui kasutaja kerib lehekülge alla või üles.
Sõltuvus: jQuery | Suurus: 8.69kb | Litsents: MIT
Rlsmooth
See on väike plugin, mis loob voolava efekti, kui kasutaja tabab lehekülge üles või üles. Saadaval on kolm mõju: slaid, fade ja show.
Sõltuvus: jQuery | Suurus: 1.95kb | Litsents: MIT
Scrollme
Lisab lehekülje kerimiseks lihtsaid efekte, näiteks skaala, pöörlemist, tõlkimist ja elementide läbipaistmatuse muutmist. See on lihtne seadistada: lihtsalt importige jQuery, see plugin ja seadistage elemendi märgistusele animatsiooni parameetrid.
Sõltuvus: jQuery | Suurus: 5.45kb | Litsents: N / A
Parallaks ImageScroll
See plugin võimaldab teil anda parallaaksi efekti igale teie lehe pildile. See kasutab CSS3 Transformi, et teha mõju. See plugin toetab jQuery ja AMD.
Sõltuvus: jQuery | Suurus: 8.01kb | Litsents: MIT
