JavaScript bibliotēkas bibliotēkām, lai veiktu atdzistus ritināšanas efektus
Mājas lapas dizains atdzīvojas ar labi izpildītu animāciju. Ja jūs meklējat pareizas bibliotēkas, lai pievienotu efektus savam projektam, šeit es esmu izveidojis dažu bibliotēku sarakstu varat izmantot, lai sniegtu efektus, pamatojoties uz ritināšanas notikumu.
Kad lietotājs ritina jūsu tīmekļa lapu, darbība tiek veikta var veidot, lai aktivizētu dažādas animācijas iespējas piemēram, izbalēšanas efekti, izplūdums, 3D, paralakss un citi. Šeit ir 25 JS bibliotēkas, kas var palīdzēt jums sasniegt šāda veida atbildes jūsu vietnes dizainā.
Ritiniet Atklāt
Bibliotēka, kas ļauj ērti pievienot ritināšanas animāciju gan tīmeklī, gan mobilajā ierīcē. Varat iestatīt pielāgotus atvieglojumus, 3D rotācijas, ilgumu un daudzus mor parametrus elementam, kuru vēlaties animēt.
Atkarības: neviens | Izmērs: 2.9kb | Licence: MIT
Aniview
Spraudnis, kas darbojas kopā ar Animate.CSS, lai aktivizētu animācijas tikai tad, kad jūsu elements ir skatīšanās logā.
Atkarības: jQuery | Izmērs: 1kb | Licence: N / A
Fade Into View
Spraudnis, kas pievieno izbalēšanas / izejas efektu elementiem, kad tie ievada vai iziet no iepriekš noteiktiem skatu logiem.
Atkarības: jQuery | Izmērs: 3.81kb | Licence: N / A
WOW
WOW atklās Animate.css animācijas pēc ritināšanas notikuma. Jūs varat iestatīt animācijas ilgumu, aizkavēšanos, nobīdes un atkārtojumus tieši no HTML atzīmes, pēc tam zvaniet uz elementa klasi no JS.
Atkarības: Animate.css | Izmērs: 8.23kb | Licence: MIT
ScrollMagic
Šis spraudnis parādīs “burvju” efektu, kad lietotājs ritina lapu. Tas ir ideāli piemērots animācijai, elementa piesaistīšanai vai CSS klases pārslēgšanai, pamatojoties uz ritināšanas pozīciju. ScrollMagic var sadarboties ar GSAP un VelocityJS, veidojot animācijas skatījumu. Skatiet pilnos demonstrējumus šeit.
Atkarības: jQuery, GSAP, Velocity.js | Izmērs: 16.9kb | Licence: MIT
jScrollability
jScrollability ļauj izveidot vienotas tīmekļa lapas ar sarežģītām ritināšanas animācijām. Pēc lietotāja ritināšanas elements elements tiks aktivizēts, pamatojoties uz ritināšanas pozīcijām. Animācijas darbojas, pamatojoties uz ritināšanas dziļumu, un, protams, varat iestatīt animācijas sākumu un beigas.
Atkarības: jQuery | Izmērs: 1,86kb | Licence: MIT
pushIn.js
Vienkārša bibliotēka, lai pievienotu dolly-in vai push-in efektu jebkuram elementam, kas darbojas, kad lietotājs ritina lapu. Tas ir viegli īstenojams: vienkārši pievienojiet sākuma, beigu un ātruma parametrus datu params HTML elementam.
Atkarības: neviens nav | Izmērs: 4.94kb | Licence: N / A
Scrollissimo
Šī ir JS bibliotēka, lai pievienotu vienmērīgas ritināšanas kontrolētas animācijas. Tā izmanto Greensock's tweens un laika grafikus, lai radītu vienmērīgākas animācijas.
Atkarības: GreenShock TweenLite / TweenMax | Izmērs: 2.94kb | Licence: N / A
jQuery animācijas ritināšanas spraudnis
Šis ir jQuery spraudnis, lai, izmantojot Greensock, pievienotu skatu portu aktivizētu animāciju. Tas atvieglo elementu animāciju, atvieglojot, pārveidojot, mērogojot, rotējot un 3D animācijas.
Atkarības: jQuery, GreenShock | Izmērs: 14kb | Licence: GNU GPL
Circlr
Circlr ļauj izveidot rotācijas animāciju elementam, ko aktivizē ritināšana, peles notikumi vai pieskārienu notikumi. Tas ir ideāls, lai izveidotu vitrīnu izstrādājumam, ko var apskatīt no visiem 360 grādiem, ko aktivizē lietotāja ritināšana.
Atkarības: neviens nav | Izmērs: 6.05kb | Licence: MIT
Scrollimator
Scrollimator parādīs pozīciju un ritināšanas progresu, kā arī atgriezīs vērtības, ko var izmantot, lai mainītu savienojošās animācijas, kas pievienotas lietotāja ritināšanas uzvedībai. Tā atbalsta vertikālo un horizontālo ritināšanu.
Atkarības: neviens nav | Izmērs: 37.7kb | Licence: N / A
Crossfade
Crossfade ir spraudnis, lai attēlam pievienotu šķērsgriezuma efektu. Izplūdušais efekts turpināsies, kad lietotājs ritinās tālāk.
Atkarības: jQuery | Izmērs: 3.19kb | Licence: MIT
Lapas ritināšanas efekts
Šī ir bibliotēka, kurā tiek izmantotas eksperimentālas lapas ritināšanas efekti, ko radījusi CodyHouse. Tā izmanto velocitey.js animācijas.
Atkarības: jQuery, Velocity.js | Izmērs: 17,6kb | Licence: N / A
jquery.parallax-scroll
Šī bibliotēka ļauj jums pievienot vienmērīgu paralaksu efektu vertikālai lapas ritināšanai. Vienkārši importējiet jQuery un jquery.easing.1.3.js, tad pievienojiet "paralakss" atribūts un izvēles elementi jūsu elementam, lai pielāgotu efektu.
Atkarības: jQuery, jQuery.easing | Izmērs: 8.72kb | Licence: GNU GPL
parallax.js
Parallax.js ir vienkāršs spraudnis, kas papildina paralaksu ritināšanas efektu, kuru iedvesmoja Spotify tīmekļa vietne.
Atkarības: jQuery | Izmērs: 6.63kb | Licence: MIT
Enllax
Enllax ir super viegla bibliotēka, kas izmantojama paralakses efekta piemērošanai jebkuram ritināšanas elementam. Jūs varat iestatīt fona vai priekšplāna elementus, lai tie būtu efekti. Tas darbojas gan vertikāli, gan horizontāli.
Atkarības: jQuery | Izmērs: 1,53kb | Licence: MIT
Blur ritiniet
Šī bibliotēka palīdz jums pievienot attēla izplūšanas efektu, ko aktivizēs lapas ritināšana. Jo dziļāk jūs ritiniet lapu lejup, jo vairāk izplūdis attēls.
Atkarības: neviens nav | Izmērs: 1.1kb | Licence: N / A
boxLoader
boxLoader ir vienkāršs spraudnis elementu ielādēšanai pēc lapas ritināšanas. Parametrs, kas jāiestata, ir virzieni (x vai y), pozīcija procentos, efekts un ilgums.
Atkarības: jQuery | Izmērs: 3.42kb | Licence: N / A
Noliektā lappuses ritināšana
Tā kā lietotājs ritina lapu, šis spraudnis atklās lielisku 3D slīpēto efektu iestatītajam elementam.
Atkarības: jQuery | Izmērs: 1.5kb | Licence: GNU GPL
AhRelax
AhRelax nodrošina iespēju veikt ātras ritināšanas animācijas. Tas ir lighweight un ir arī liels sniegums. Par to varat uzzināt šeit.
Atkarības: jQuery | Izmērs: 1.6kb | Licence: MIT
Fancy Scroll
Ja jūs kādreiz redzat pārplūdes ritināšanas efektu uz Android vai iOS, ar šo spraudni tagad varat to piemērot savai vietnei. Ja lietotājs sasniedz lapas augšējo / apakšējo daļu, varat pievienot animāciju, vai nu piepeši, vai spīdumu.
Atkarības: jQuery | Izmērs: 2,64kb | Licence: GNU GPL
Ritiniet paralaksu
Šis spraudnis ļaus elementiem peldēt un pārvietoties, kad lietotājs ritina uz leju vai uz augšu.
Atkarības: jQuery | Izmērs: 8.69kb | Licence: MIT
Rlsmooth
Šis ir neliels spraudnis, lai izveidotu plūstošu efektu, kad lietotājs skata lapu vai uz augšu. Ir pieejami trīs efekti: slaids, izbalināt un parādīt.
Atkarības: jQuery | Izmērs: 1.95kb | Licence: MIT
Scrollme
Pievieno vienkāršus efektus lapas ritināšanai, piemēram, mērogu, pagriezt, tulkot un mainot elementu necaurredzamību. Tas ir viegli uzstādāms: vienkārši importējiet jQuery, šo spraudni un iestatiet animācijas parametrus elementa atzīmei.
Atkarības: jQuery | Izmērs: 5.45kb | Licence: N / A
Parallax ImageScroll
Šis spraudnis ļauj jums sniegt paralaksu efektu jebkuram jūsu lapas attēlam. Tā izmanto CSS3 Transform, lai veiktu efektu. Šis spraudnis atbalsta jQuery un AMD.
Atkarības: jQuery | Izmērs: 8.01kb | Licence: MIT
