Bla og animer siden din enkelt med Force.js
Web animasjon er enklere enn noen gang før, med rene CSS3 animasjoner blir normen. Men, JavaScript er fortsatt utrolig verdifullt og det er et av de få pålitelige språkene for tekniske animasjoner.
De Force.js bibliotek er et gratis åpen kildekode skript bygd rundt dynamiske side animasjoner.
Du kan bygge rullende hopp animasjoner inne i selve siden, eller du kan animere elementer rundt siden. Begge er like enkle å sette opp og biblioteket kommer med massevis av funksjoner.
Som standard, Force.js stoler på CSS-overganger når det er mulig. Disse arbeid i alle moderne nettlesere og koden er mye enklere, pluss det gir bredere støtte til brukere som ikke tillat JavaScript.
Biblioteket bruker a naturlig nedbrytingsmetode med JavaScript-kode, så det er sikkert også for eldre nettlesere.
Og, Force.js er et vaniljebibliotek, så det krever ikke noen avhengighet for eksempel jQuery. Men hvis du elsker jQuery kan du kjøre den syntaksen over Force, og det vil fortsatt fungere helt fint. Flott for allsidighet med forskjellige nettsteder.
De to store animasjonsteknikkene er hopp og beveger seg. Du bestemmer hvor elementet beveger seg, hvor fort det beveger seg, og over hvilke typer lettelsesmetoder.
Biblioteket har også en rekke egendefinerte alternativer Du kan justere for enda bedre kontroll over animasjonene. Du kan rediger ankerlenkemålene og sette opp hvilke lettelser du trenger-selv om du vil ha forskjellige lettelser på samme side!
Alt dokumentasjonen er tilgjengelig på GitHub, sammen med filene.
Eller, hvis du foretrekker npm / Bower, kan du trekk filer direkte den veien. Du trenger bare å inkludere den ene force.js
fil inn i toppteksten din, og du vil være god til å gå.
Jeg anbefaler også å skumme dokumentasjonen fordi den er full av eksempler på hoppe()
og bevege seg()
fremgangsmåter.
De begge ta argumenter for tid, lettelse og posisjon, så det er viktig å forstå hvordan disse fungerer. Selv om du først får det ned, vil du aldri se tilbake fordi det er det perfekte lette animasjonsbiblioteket for ethvert prosjekt.