Rul og animer din side nemt med Force.js

Web animation er nemmere end nogensinde før, med rene CSS3 animationer bliver normen. Men, JavaScript er stadig utrolig værdifuldt og det er et af de få pålidelige sprog til tekniske animationer.

Det Force.js bibliotek er et gratis open-source script bygget op dynamiske side animationer.

Du kan bygge rullende spring animationer inde i selve siden, eller du kan animere elementer omkring siden. Begge er lige så nemme at oprette, og biblioteket kommer med masser af funktioner.

Som standard, Force.js afhænger af CSS overgange når det er muligt. Disse arbejde i alle moderne browsere og koden er meget enklere, plus den giver bredere support til brugere, der Tillad ikke JavaScript.

Biblioteket bruger a naturlig nedlukningsmetode med JavaScript-kode, så det er sikkert også for ældre browsere.

Og Force.js er et vaniljebibliotek, så det kræver ikke nogen afhængighed som jQuery. Men hvis du elsker jQuery kan du køre den syntax over Force, og det vil stadig fungere fint. Perfekt til alsidighed med forskellige hjemmesider.

De to store animationsteknikker er spring og flytter sig. Du bestemmer, hvor elementet bevæger sig, hvor hurtigt det bevæger sig, og over hvilke typer af lempelsesmetoder.

Biblioteket har også en masse brugerdefinerede muligheder Du kan finjustere for endnu større kontrol over animationerne. Du kan rediger ankerlink målene og oprette hvilke lempelser du skal bruge-selvom du vil have forskellige lempelser på samme side!

Al dokumentationen er tilgængelig på GitHub, sammen med filerne.

Eller hvis du foretrækker npm / Bower kan du Træk filer direkte Den vej. Du skal bare inkludere den ene force.js fil ind i dit overskrift, og du vil være god at gå.

Jeg anbefaler også at skumme dokumentationen, fordi den er fuld af eksempler på hoppe() og bevæge sig() metoder.

Dem begge tage argumenter for tid, lempelse og position, så det er afgørende at forstå, hvordan disse fungerer. Selvom du først får det ned, vil du aldrig se tilbage, fordi det er det perfekte lette animationsbibliotek til ethvert projekt.