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.

Force.js-biblioteket er et gratis åpen kildekode som er bygd rundt dynamiske sideanimasjoner .

Du kan bygge rullende hopp animasjoner på selve siden, eller du kan animere elementer rundt siden . Begge er like enkle å sette opp og biblioteket kommer med massevis av funksjoner.

Som standard er Force.js avhengig av CSS-overganger når det er mulig. Disse arbeidene i alle moderne nettlesere og koden er mye enklere, pluss det gir bredere støtte til brukere som ikke tillater JavaScript .

Biblioteket bruker en naturlig nedbrytingsmetode med JavaScript-kode, så det er sikkert også for eldre nettlesere.

Og Force.js er et vaniljebibliotek, så det krever ikke noen avhengigheter som jQuery. Men hvis du elsker jQuery kan du kjøre den syntaksen over Force, og det vil fortsatt fungere bra. Flott for allsidighet med forskjellige nettsteder.

De to store animasjonsteknikkene er hopp og bevegelser . Du bestemmer hvor elementet beveger seg, hvor fort det beveger seg, og over hvilke typer lettelsesmetoder.

Biblioteket har også en rekke spesialtilpassede alternativer du kan justere for enda bedre kontroll over animasjonene. Du kan redigere ankerlenkemålene og sette opp hvilke lettelser du trenger - selv om du vil ha forskjellige lettelser på samme side!

All dokumentasjonen er tilgjengelig på GitHub, sammen med filene.

Eller, hvis du foretrekker npm / Bower, kan du trekke filer direkte på den måten. Du trenger bare å inkludere den ene force.js filen i overskriften, og du vil være god å gå.

Jeg anbefaler også å skumme dokumentasjonen fordi den er full av eksempler på jump() og move() metoder .

De tar begge 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.