Animation med en bil i javascript. Lovende JavaScript-biblioteker og plugins til animation
Med udtrykket "animation" mener vi oftest animerede film - de "tegnefilm", vi har elsket siden barndommen. Men hvis man ser nærmere på Ordbog, så lærer vi, at oversat fra fransk betyder det "genoplivning", "animation". Og her viser det sig, at denne betydning overraskende præcist passer ikke kun til filmindustrien, men også webteknologier.
Brug af forskellige animationseffekter(overgange, bevægelser, transformationer osv.) "opliver" webstedet betydeligt, giver dig mulighed for at kontrollere brugerens opmærksomhed, skifte den til det nødvendige element og give visse visuelle signaler.
Når vi taler om animation, kan man ikke undlade at nævne de velkendte 12 principper, som er formuleret af animatorerne i Disney-studiet, hvis brug er ekstremt vigtigt for de rimelige og kvalitetsbrug animationseffekter.
Taler om teknologier, der giver ved hjælp af animation på websider, flere kan skelnes, men måske er ingen af dem så kraftfulde som . For blot et par år siden var Flash-animationsteknologi en formidabel konkurrent og meget populær. Men nu ser det ud til, at hun bedste år bag, og det bliver gradvist erstattet fra hjemmesidens sider af mere kraftfulde og fleksible Java-scripts. Og hvis du beslutter dig seriøst brug animation på din hjemmeside, så skal du satse på JavaScript. Og for at kunne træffe et smart valg af bibliotek lavede jeg dagens anmeldelse.
Dynamics.js
Jeg skal nok starte med Dynamics.js. Dette er et seriøst og kraftfuldt bibliotek, der giver dig mulighed for at skabe fysisk nøjagtige animationer (såsom harmoniske dæmpede svingninger peger på hjemmeside websted). Biblioteket er i stand til at administrere egenskaberne for ethvert DOM-element. Dynamics.js bruges til at oprette menuer, knapper, procesindikatorer, markører. I dette tilfælde er en lang række parametre tilgængelige, såsom frekvens, dæmpningsreduktion, parametre, der karakteriserer elasticitet eller procesvarighed osv.
Cta.js
Lille i volumen cta.js bibliotek tilsigtet for at skabe animationseffekter på siden"action-effekt" type, dvs. at holde musemarkøren over eller klikke på et objekt frembringer en bestemt effekt. Meget praktisk at bruge under udvikling flisebelagte grænseflader, når du klikker på et element får det til at udvide sig som modal vindue, hel side eller som sidebjælke.
Beep.js
Et interessant bibliotek, der bruger WebAudio API til at skabe en musiksynthesizer på en side. Kan bruges til at udvikle en online musikbog eller som et sjovt legetøj.
Rainyday.js
Utrolig smuk regneffekt med dråber forskellige størrelser, flyder ned. Men efter min mening mangler store dråber realisme (måske den samme fysik, som er til stede i Dynamics.js?). Men den eksisterende API giver dig mulighed for at oprette dine egne objekter og kontrollere deres adfærd, hvilket skaber endnu mere utrolige effekter.
Dom-Animator.js
Dom-Animator.js er den såkaldte " Påskeæg"(påskeæg). Effekten, det frembringer, er ikke synlig for det "nøgne" øje, dvs. for dem, der ser siden i et almindeligt browservindue. Men dem, der analyserer din kode, vil se den i konsollen (hvis du stadig ikke forstår, hvad vi taler om, er der en video her, der vil gøre alt klart).
Berømt
Berømt - begivenhedsdrevet JS-bibliotek til at skabe moderne animation. Den har en kraftfuld geometrisk kerne, der giver dig mulighed for at manipulere forskellige 3D-objekter - punkt- og volumetriske - påføre kræfter og accelerationer på dem, pålægge begrænsninger og kontrollere kollisioner.
Bounce.js
Ikke dårligt JavaScript-bibliotek til at skabe imponerende animationer Med ved hjælp af CSS. Giver dig mulighed for at anvende på objekter forskellige slags bevægelse, rotation, skalering og transformation.
Snabbt.js
Et let og hurtigt bibliotek, der ifølge udviklerne producerer 60 fps selv på mobile enheder. Ved hjælp af transformationsmatricer giver CSS dig mulighed for at flytte, rotere, skalere og udføre andre manipulationer med objekter. Det giver dig også mulighed for at anvende specielle effekter på objekter, der tiltrækker opmærksomhed, som kan bruges, når du udfylder formularer.
Rekapi
Rekapi giver dig mulighed for at bruge begge dele CSS keyframe animation(@keyframes-regel), og DOM-animation når JavaScript hjælp. Dette bibliotek giver dig mulighed for at skabe ret komplekse dynamiske objekter, såsom cirkel- og linjediagrammer, tidslinjer og andre brugergrænsefladeelementer.
Skiftende
Shifty er et bibliotek, der indeholder alt, hvad du har brug for til en komplet keyframe animation(det såkaldte "twinning"), og antallet af objekter kan simpelthen være enormt. Det er et bibliotek på lavt niveau, der kan bruges som en kerne til platforme eller biblioteker på højere niveau. Faktisk bruges Shifty som kernen i førnævnte Rekapi.
Den sidste del vil beskrive de forskellige tilbagekaldsfunktioner, der bruges til at udføre funktioner afhængigt af animationens fremskridt. Næsten alle eksempler i tidligere artikler er brugt CSS-egenskaber for at vise, hvordan de fungerer forskellige metoder og parametre. Du er måske under indtryk af, at Anime.js er mere velegnet til at animere CSS-egenskaber. I denne tutorial lærer du, at den også kan bruges til SVG animationer-filer.
I de tre foregående artikler undersøgte vi mange af funktionerne i Anime.js-biblioteket. Du kan lære at vælge målelementer; om de typer parametre, der bruges til at kontrollere forsinkelsen og varigheden af animationen; c - hvordan man får mere kontrol over værdierne af enkeltejendomme.
Tilbagekaldsfunktioner
Tilbagekald bruges til at udføre funktioner baseret på animationens fremskridt. Der er 4 funktioner i Anime.js ring tilbage: begynde, køre, opdatere og fuldføre. Hver af dem løber ind bestemt tidspunkt og tager et animationsobjekt som sit argument.
Start()-funktionen kaldes, når animationen begynder. Det betyder, at hvis animationen har en forsinkelsesparameter med en værdi på 800 millisekunder, så vil start() først blive kaldt 800 millisekunder senere. Du kan kontrollere, om en animation er startet eller ej, ved at bruge funktionen animationName.begin, som returnerer sand (startet) eller falsk (startede ikke).
Kør bruges til at udføre en funktion hver frame efter animationen starter. Hvis du har brug for at udføre en funktion hver frame lige fra begyndelsen af animationen, uanset forsinkelsesparameteren, så brug opdaterings-tilbagekaldsfunktionen.
Den komplette tilbagekaldsfunktion ligner begynde , kun den kaldes efter afslutningen. For at kontrollere, om animationen er fuldført eller ej, skal du bruge animationName.complete , ligesom med start .
Vi brugte ttilbage i dag til at opdatere antallet af scannede og inficerede filer. I denne artikel vil vi udvide scanningseksemplet, og du vil se, hvordan alle tilbagekaldsfunktionerne fungerer.
Var filesScanned = (antal: 0, inficeret: 0); var scanCount = document.querySelector(".scan-count"); var infected = document.querySelector(".infected-count"); var scanning = anime((mål: filerScanned, autoplay: falsk, tæller: 100, inficeret: 8, forsinkelse: 1000, varighed: 2000, easing: "lineær", runde: 1, opdatering: funktion(anim) ( if (anim) .nuværende tid< 1000) { document.querySelector(".update-cb").innerHTML = "Creating an Index..."; } }, begin: function() { document.querySelector(".begin-cb").innerHTML = "Starting the Scan..."; }, run: function() { scanCount.innerHTML = filesScanned.count; infected.innerHTML = filesScanned.infected; }, complete: function() { document.querySelector(".complete-cb").innerHTML = "Scan Complete..."; } });
I eksemplet ovenfor blev der med vilje tilføjet en animationsforsinkelse, så du kunne bemærke forskellen i udførelsestid forskellige funktioner ring tilbage. Obegynder at køre umiddelbart efter, at animationsobjektet er oprettet.
Selve animationen begynder med en forsinkelse på 1000 millisekunder, og det er i dette øjeblik, at startfunktionen udløses, som viser brugeren beskeden "Starter scanningen...". Samtidig starter kørslen eksekvering og opdatering numeriske værdier objekt efter hver frame. Når animationen er færdig, viser det komplette tilbagekald meddelelsen "Scanning fuldført...".
Glathedsfunktioner
Glathedsfunktioner bruges til at styre overgangen fra den oprindelige værdi af en ejendom til den endelige værdi. Disse funktioner kan defineres ved hjælp af lempelsesparameteren, som kan tage værdier enten som strenge eller som tilpassede Bezier-kurvekoordinater (som et array).
Der er 31 indbyggede udjævningsfunktioner. En af dem kaldes lineær, de andre 30 består af forskellige variationer af easeIn, easeOut og easeInOut. Den elastiske klasse definerer tre glathedsfunktioner: easeInElastic, easeOutElastic og easeInOutElastic. Du kan styre dem ved hjælp af elasticitetsparameteren. Værdien af denne parameter kan kun være i området fra 0 til 1000.
Brug af easeIn ændrer værdien hurtigere, startende fra nul. Det betyder, at det vil ændre sig langsomt i starten og hurtigt til sidst. Ændringshastigheden er nul i begyndelsen og 1000 i slutningen.
EaseOut-funktionen sænker værdiændringen fra den maksimale hastighed.
easeInOut øger hastigheden, hvormed værdier ændres i begyndelsen og sænker dem i slutningen. Det betyder, at midt i animationen vil hastigheden være den hurtigste. Følgende boks viser forskellen mellem disse glathedsfunktioner:
Med anime.easings kan du oprette native funktioner glathed. Nedenfor er et eksempel på at skabe brugerdefinerede funktioner glathed:
Anime.easings["tanCube"] = funktion(t) ( return Math.pow(Math.tan(t * Math.PI / 4), 3); ) anime.easings["tanSqr"] = funktion(t) ( return Math.pow(Math.tan(t * Math.PI / 4), 2 ) var tanCubeSequence = anime(( targets: ".tan-cube", translateX: "75vw", varighed: 2000, easing: " tanCube" , autoplay: falsk )); var tanSqrSequence = anime(( targets: ".tan-sqr", translateX: "75vw", varighed: 2000, easing: "tanSqr", autoplay: false ));
Animationer baseret på SVG-filer
I alle bevægelsesrelaterede animationer, der er blevet oprettet indtil dette tidspunkt, har målelementerne bevæget sig i en lige linje. I Anime.js kan du flytte elementer langs komplekse SVG-stier med stort beløb kurver med evnen til at kontrollere positionen og vinklen af animerede elementer på konturen. For at flytte et element langs X-aksen på en kurve, brug path("x") . På samme måde kan elementer flyttes langs Y-aksen ved hjælp af path("y") .
Hvis konturen ikke er repræsenteret som en lige linje, vil den næsten altid danne en vinkel i forhold til hovedet vandret linje. Når du roterer et ikke-cirkulært animationselement, vil det overordnede billede se mere naturligt ud, hvis elementet bevæger sig langs hjørnet af stien. Dette kan gøres ved at sætte egenskaben rotate til path("angle") . Nedenfor er et kodeeksempel, der animerer fire elementer med forskellige betydninger glathed langs SVG-konturen:
Var sti = anime.path("sti"); var easings = ["lineær", "easeInCubic", "easeOutCubic", "easeInOutCubic"]; var motionPath = anime((mål: ".square", translateX: path("x"), translateY: path("y"), rotate: path("angle"), easing: function (el, i) (retur lempelser[i]), varighed: 10000, loop: sand ));
I indsætningen nedenfor kan du se, at den røde firkant med easeInCubic-funktionen bevæger sig langsomst i begyndelsen, men hurtigst i slutningen. Situationen er den samme i tilfældet med den orange firkant - den bevæger sig hurtigst i begyndelsen, men langsomst i slutningen.
Det er muligt at animere transformationerne af forskellige SVG-former fra den ene til den anden ved hjælp af Anime.js. Den eneste betingelse for at transformere figurer er at have et lige antal ankerpunkter. Det betyder, at trekanter kun kan konverteres til andre trekanter, firkanter til firkanter og så videre. At forsøge at transformere elementer med et ulige antal ankerpunkter vil resultere i en drastisk ændring i form. Nedenfor er et eksempel på trekantstransformationer:
Var morphing = anime(( mål: "polygon", point: [ ( værdi: "143 31 21 196 286 223" ), ( værdi: "243 31 21 196 286 223" ), ( værdi: "243 31 121 196 28 223" ), ( værdi: "243 31 121 196 386 223" ), ( værdi: "543 31 121 196 386 223") ), lempelse: "lineær", varighed: 4000, retning: "alternativ", loop: sand ));
En af de mest interessante effekter af Anime.js er evnen til at lave stregtegninger. Alt du skal gøre er at give biblioteket den disposition, du vil bruge til stregtegningen; give andre parametre, hvormed varighed, forsinkelse og jævnhed kontrolleres. Eksemplet nedenfor brugte den komplette tilbagekaldsfunktion til at udfylde ankertegningen fra Font Awesome gul farve.
Var lineDrawing = anime(( targets: "sti", strokeDashoffset: , easing: "easeInOutCubic", varighed: 4000, komplet: function(anim) ( document.querySelector("sti").setAttribute("fill", "yellow" ); ) ));
Ved at bruge viden om alle de begreber, du har lært, vil du være i stand til at lave mere komplekse stregtegninger med meget mere bedre kontrol over hvordan de er tegnet. Nedenfor er et eksempel på gengivelse af et navn ved hjælp af SVG:
Var letterTime = 2000; var lineDrawing = anime(( targets: "sti", strokeDashoffset: , easing: "easeInOutCubic", varighed: letterTime, delay: function(el, i) ( return letterTime * i; ), start: function(anim) ( var letters = document.querySelectorAll("sti"), i for (i = 0; i< letters.length; ++i) { letters[i].setAttribute("stroke", "black"); letters[i].setAttribute("fill", "none"); } }, update: function(anim) { if (anim.currentTime >= letterTime) ( document.querySelector(".letter-m").setAttribute("fill", "#e91e63"); ) if (anim.currentTime >= 2 * letterTime) ( document.querySelector(".letter-o ").setAttribute("fill", "#3F51B5"); ) if (anim.currentTime >= 3 * letterTime) ( document.querySelector(".letter-n").setAttribute("fill", "#8BC34A" ); ) if (anim.currentTime >= 4 * letterTime) ( document.querySelector(".letter-t").setAttribute("fill", "#FF5722"); ) if (anim.currentTime >= 5 * letterTime ) ( document.querySelector(".bogstav-y").setAttribute("fill", "#795548"); ) ), autoplay: false ));
Der er en misforståelse blandt webudviklere, at CSS-animation er den eneste produktive måde at animere på nettet. Denne myte har fået mange udviklere til helt at opgive JavaScript-baseret animation. Dermed:
- Tvang dig selv til at klare dig kompleks interaktion UI i style sheets
- Blokeret dig selv ind Internet support Explorer 8 og 9
- Giver afkald på evnen til at bygge bevægelsesfysik, hvilket kun er muligt i JavaScript
Real-life test: baseret på JavaScript animation lige så hurtigt som CSS-baserede animationer - nogle gange endda hurtigere. CSS-animation har generelt kun en fordel i forhold til jQuerys $.animate(), som i sagens natur er meget langsom. JavaScript-animationsbiblioteker, der omgår jQuery, viser imidlertid en utrolig ydeevne, mens de undgår DOM-manipulation så meget som muligt. Disse biblioteker kan være op til 20 gange hurtigere end jQuery.
Så lad os aflive nogle myter, dykke ned i nogle rigtige eksempler animationer og forbedre vores programmeringsevner i processen. Hvis du elsker at udvikle praktiske UI-animationer til dine projekter, så er denne artikel noget for dig.
Hvorfor JavaScript?
CSS-animationer er nyttige, når du skal lave ejendomsovergange i dine stylesheets. Plus, de leverer fantastisk ydeevne lige ud af boksen – uden at tilføje et bibliotek til siden. Men når du bruger CSS-overgange til at drive et rigt bevægelsesdesign (som du vil se i seneste versioner iOS og Android), bliver de for svære at administrere, eller deres funktioner er simpelthen fyldt med fejl.
I sidste ende begrænser CSS-animationer dig til en specifik specifikation. I JavaScript har du i kraft af ethvert programmeringssprogs natur en uendelig mængde logisk kontrol. JavaScript-animationsmotorer udnytter dette faktum til at levere nye funktioner, der giver dig mulighed for at gøre nogle meget nyttige ting:
Bemærk: Hvis du er interesseret i emnet præstation, kan du læse Julian Shapiros "CSS vs. S Animation: Hvilken er hurtigere?" og Jack Doyle: "Busting the Myth: CSS Animations vs. JavaScript". For præstationsdemoer, se præstationspanelet i Velocity-dokumentationen og GSAP "Speed Comparison Library"-demoen.
Hastighed og GSAP
De to mest populære JavaScript-animationsbiblioteker er Velocity.js og GSAP. Begge fungerer med og uden jQuery. Der er ingen ydeevnestraf, når du bruger disse biblioteker med jQuery, fordi de helt omgår jQuery-animationsstakken.
Hvis jQuery er til stede på din side, kan du bruge Velocity og GSAP ligesom jQuery's $.animate(). For eksempel, $element.animate(( opacitet: 0,5 )); det bliver bare $element.velocity(( opacitet: 0,5 )).
Disse to biblioteker fungerer også, når jQuery ikke er til stede på siden. Dette betyder, at i stedet for at kæde animationskaldet ind i et jQuery-objektelement - som blot vist - vil du videregive målelementet/-erne til animationskaldet:
1 | /* Arbejder uden jQuery */ Hastighed(element, ( opacitet: 0,5 ) , 1000 ); //Hastighed TweenMax.to(element, 1, (opacitet: 0,5)); // GSAP |
Som du kan se, bevarer Velocity den samme syntaks som jQuerys $.animate(), selv når den bruges uden jQuery; Du skal blot flytte alle parametre til den ene position til højre for at skabe plads til at passere de tilsigtede elementer i den første position.
GSAP bruger på den anden side et objektorienteret API-design, såvel som brugervenligt statiske metoder. På denne måde kan du have fuld kontrol over animationerne.
I begge tilfælde animerer du ikke længere objektet jQuery element, men snarere en rå DOM-node. Som en påmindelse får du adgang til rå DOM-noder ved hjælp af document.getElementByID , document.getElementsByTagName , document.getElementsByClassName eller document.querySelectorAll (som fungerer på samme måde for jQuerys vælgermekanisme). Vi vil arbejde med disse funktioner i næste afsnit.
Arbejder uden jQuery
(Bemærk: Hvis du har brug for en grundlæggende primer på jQuery's $.animate(), så tjek de første par sektioner i Velocity-dokumentationen.)
Lad os udforske querySelectorAll, fordi dette sandsynligvis er det våben, du vil bruge, når du vælger elementer uden jQuery:
Som vist videregiver du blot querySelectorAll CSS-vælger(de samme vælgere, som du ville bruge i dine typografiark), og det vil returnere alle matchende elementer i et array. Derfor kan du gøre dette:
1 | /* Hent alle div-elementer. */ |
Da vi ikke længere vedhæfter animationer til jQuery-elementobjekter, undrer du dig måske over, hvordan vi kan kæde animationer sammen:
I Velocity kalder du blot animationerne én efter én:
/* Disse animationer bliver automatisk en kæde. */ |
Der er ingen ydeevneulempe ved at animere denne sti (du cachelagrer elementet, der animeres til en variabel, i stedet for gentagne gange at skulle foretage querySelectorAll-valg på det samme element).
(Tip: Med Velocity UI Pack kan du oprette dine egne multicall-animationer og give dem brugerdefinerede navne, som du senere kan bruge som den første Velocity-parameter. Se dokumentationen til Velocity UI Pack for mere information.)
Velocitys call-to-process-at-a-time har en kæmpe fordel: Hvis du bruger løfter med dine Velocity-animationer, vil hvert Velocity-kald returnere et effektivt løfteobjekt. Du kan lære mere om at arbejde med løfter i Jake Archibalds artikel. De er utrolig stærke.
I tilfælde af GSAP giver dens udtryksfulde objektorienterede API dig mulighed for at placere dine animationer på en tidslinje, hvilket giver dig kontrol over planlægning og timing. du er ikke begrænset til kædeanimationer; du kan indlejre tidslinjer, få animationer til at overlappe osv.:
Det fantastiske ved JavaScript: Workflow
Animation er i bund og grund en eksperimentel proces, der kræver leg med timing og lempelse for at få den rigtige fornemmelse, som applikationen har brug for. Selv hvis du synes designet er fantastisk, vil klienten selvfølgelig ofte anmode om ikke-trivielle ændringer. I disse situationer bliver styret arbejdsgang vigtig.
Mens CSS-overgange Selvom det er ganske enkelt at indsætte i et projekt for effekter som at svæve, bliver de uoverskuelige, når du forsøger at sekvensere selv moderat komplekse animationer. Dette er grunden til, at CSS leverer keyframe-animation, som giver dig mulighed for at gruppere animationslogik i sektioner.
Den grundlæggende ulempe ved Keyframe API er dog, at du skal definere sektioner i procenter, hvilket ikke er intuitivt. For eksempel:
1 | @keyframes myAnimation ( #boks ( |
Hvad sker der, hvis klienten beder dig om at gøre translateX-animationen et sekund længere? Dette kræver genopbygning af matematikken og ændring af alle (eller de fleste) procenter.
I denne artikel vil vi gerne introducere dig til nogle af de mest nyttige JavaScript-biblioteker, der kan bruges til at animere indholdet af webapplikationer. Disse biblioteker er designet til at skabe animationer til rullemenuer, glidende elementer, parallakse-animationer og endda skrifttyper.
Og det vigtigste er, at alt er 100% frie midler med åben kildekode, så du kan bruge dem i alle dine projekter.
1.Dyanamic.js
Aktiver blot dynamics.js på siden, og så kan du animere CSS-egenskaber på ethvert DOM-element. Du vil også være i stand til at animere SVG-egenskaber.
Dynamics.js indeholder sin egen setTimeout-egenskab. Årsagen er, at requestAnimationFrame og setTimeout har forskellig adfærd. Ejendom støttet af alle JavaScript-objekter. Biblioteket er testet for kompatibilitet med Safari 7+, Firefox, Chrome 35+ 34+, IE10+.
2. Animate Plus
Produktiv JavaScript bibliotek, som hjælper dig med at animere CSS-egenskaber og SVG-attributter.
Animate Plus er fantastisk til at organisere hurtig interaktion med alle grænsefladekontroller, såvel som lange sekvenser animationer til desktop og mobile enheder.
3. Cta.js
Kompakt, produktiv JavaScript bibliotek at animere ethvert element ("handling") inde i ethvert andet element ("effekt") på siden.
4. Beep.js
Beep.js er et sæt værktøjer til at skabe browserbaserede JavaScript-synthesizere ved hjælp af WebAudio API.
5. Iconate.js
Produktiv JavaScript bibliotek animation og transformation af ikoner på tværs af browsere. iconate.js understøtter også AMD og CommonJS modulære skabeloner.
6.Dom Animator
JavaScript bibliotek for at vise små ASCII-animationselementer i DOM-kommentarer. Dette er et selvstændigt bibliotek, der kun bruger JavaScript ( animation udføres i kommentarnoder, kun i DOM).
7. Rainyday
Rainyday.js giver dig mulighed for at skabe realistisk udseende regndråbeeffekter på glas ved hjælp af HTML5-lærreder og JavaScript. Biblioteket inkluderer en udvidelig API og indbygget fejldetektion.
Rainyday.js bruger kraften i HTML5, så det understøttes af de fleste moderne browsere.
8. Anima.js
Anima.js giver dig mulighed for at bruge forsinkelser og varigheder, selv til CSS-animationer. Biblioteket bruges til at lave animationer CSS-transformationer og 3D-transformation med Javascript aktiveret. Du kan starte, stoppe, annullere animationer og endda skabe begivenhedsdrevne effekter.
9. blinkTitle.js
blinkTitle.js kan oprette en blinkende HTML-titel, advarsel eller notifikation i titlen.
10. Snabbt.js
Javascript bibliotek designet til at flytte elementer, forskyde, rotere, skalere, vippe og ændre størrelse. Takket være kan transformationer kombineres i enhver kombination, du ønsker. Det endelige resultat specificeres derefter ved hjælp af CSS3 transformationsmatricer.
11. Vivus
Vivus er en kompakt JavaScript-klasse ( ingen afhængigheder) for at animere SVG'er ved at tegne. Vivus indeholder mange forskellige effekter animation, er muligheden for at oprette et brugerdefineret script blevet implementeret.
12. Impuls
JavaScript bibliotek at bygge dynamiske interaktioner baseret på ægte fysik, med vægt på mobile enheder. I stedet for animationsegenskaber, der angiver en tidsperiode, ændrer Impulse position og hastighed. Det indeholder ikke stor mængde afhængigheder. Kræver ikke jQuery, men kan godt interagere med det.
13. Ani.js
AniJS er deklarativ JavaScript bibliotek til behandling af CSS-animationer. Det er fuldt dokumenteret og nemt at bruge.
14. Bounce.js
Et værktøj til at skabe smukke keyframe-animationer baseret på CSS3. Tilføj en komponent, vælg en mulighed og få en kort URL eller eksporter koden til CSS.
15. Sticker.js
Sticker.js er JavaScript bibliotek, som giver dig mulighed for at skabe peel-off klistermærkeeffekter. Biblioteket fungerer det meste af tiden populære browsere, som understøtter CSS3 ( inklusive IE10+). Fordelt under MIT licens Licens.
16. Wow.js
WOW.js viser CSS-animation, mens du ruller ned på siden. Som standard bør du bruge denne handling til at køre animate.css, men du kan nemt ændre disse indstillinger.
17. Parallax.js
Parallax.js er en kompakt løsning til at skabe parallakse effekter. Biblioteket fungerer også på smartphones og tablets ( med gyroskop eller hardware bevægelsesdetektor). Parallax.js har flere muligheder for at tilpasse effekten ved at bruge " data attributter"eller via JavaScript. Biblioteket kan fungere selvstændigt eller som JQuery plugin og Zepto ( der er to versioner).