Bläddra och animera din sida enkelt med Force.js
Webanimering är enklare än någonsin tidigare med rena CSS3-animationer bli normen. Men, JavaScript är fortfarande otroligt värdefullt och det är ett av de få pålitliga språken för tekniska animationer.
De Force.js-biblioteket är ett gratis open-source-skript byggt runt dynamiska sidanimeringar.
Du kan bygga rullningshoppanimationer inuti själva sidan, eller du kan animera element runt sidan. Båda är lika enkla att sätta upp och biblioteket levereras med massor av funktioner.
Som standard, Force.js bygger på CSS-övergångar när det är möjligt. Dessa arbeta i alla moderna webbläsare och koden är mycket enklare, plus den erbjuder bredare stöd för användare som tillåter inte JavaScript.
Biblioteket använder a naturlig nedgångsmetod med JavaScript-kod, så det är säkert även för äldre webbläsare.
Och, Force.js är ett vaniljbibliotek, så det kräver inga beroenden som jQuery. Men om du älskar jQuery kan du köra den syntaxen över Force och det kommer fortfarande fungera bra. Perfekt för mångsidighet med olika webbplatser.
De två stora animationsteknikerna är hopp och rör sig. Du bestämmer vart elementet rör sig, hur snabbt det rör sig och över vilka typer av lättnadsmetoder.
Biblioteket har också en massa anpassade alternativ du kan tweak för ännu större kontroll över animationerna. Du kan redigera ankarlänksmålen och ställa in vilka lättnader du behöver-även om du vill ha olika lättnader på samma sida!
All dokumentation är tillgänglig på GitHub, tillsammans med filerna.
Eller, om du föredrar npm / Bower kan du dra filer direkt på det sättet. Du behöver bara inkludera den force.js fil in i ditt huvud och du kommer vara bra att gå.
Jag rekommenderar också att skumma dokumentationen eftersom den är full av exempel på hoppa() och flytta() metoder.
De båda ta argument för tid, lättnad och position, så det är viktigt att förstå hur dessa fungerar. Även om du förstår det här kommer du aldrig att se tillbaka eftersom det är det perfekta lätta animationsbiblioteket för något projekt.
