nl.hideout-lastation.com
Paradijs Voor Ontwerpers En Ontwikkelaars


Anime.js - Een lichtgewicht JavaScript-animatiebibliotheek

Webanimatie heeft een lange weg afgelegd. Niet alleen kunnen ontwikkelaars een animatie maken met een combinatie van CSS / SVG / JS, maar er zijn ook tientallen gratis bibliotheken om tijd te besparen in het proces.

Een van mijn favorieten is Anime.js, een volledig gratis, open source JavaScript-animatiebibliotheek .

Deze bibliotheek kan het allemaal . Het is gebouwd op JavaScript, maar het is ook sterk afhankelijk van CSS-animaties . U kunt afzonderlijke pagina-elementen targeten via de DOM of u kunt zelfs aangepaste SVG's targeten.

Alle documentatie wordt door GitHub zelf gehost, dus misschien moet je scrollen om precies te vinden wat je zoekt. Maar elke animatiefunctie wordt geleverd met een paar parameters, zoals vertraging, duur en versoepeling.

Let op: deze bibliotheek bevat niet veel standaard-animatiestijlen. Anime.js is gemaakt voor ontwikkelaars die hun animaties willen aanpassen zonder uitgebreide code te schrijven .

Bekijk voor een live-voorbeeld de onderstaande Codepen-pen. De code is buitengewoon eenvoudig, maar je krijgt een geloofwaardige animatie met squash en stretch plus anticipatie, beide basisprincipes van animatie.

Een eerlijke waarschuwing: de Anime.js-bibliotheek is compact . Het is niet zo moeilijk om een ​​aangepaste animatie te maken, maar je moet wel een aantal basisbegrippen begrijpen zoals versoepeling en algemene JavaScript-syntaxis voor de callbacks en opties.

Maar alle informatie die u nodig hebt staat op de repopagina, inclusief veel codevoorbeelden en gedetailleerde documentatietabellen . En u kunt door open foutenrapporten bladeren of browserondersteuning controleren die momenteel alle belangrijke browsers en IE 10+ omvat .

Dit is gemakkelijk een van de beste animatiebibliotheken voor webontwikkelaars en het zou je go-to-oplossing moeten zijn voor elke complexe webanimatie .

Bekijk een verzameling live voorbeelden voor deze verzameling Anime.js-demo's die worden gehost op CodePen. Hieronder heb ik mijn favoriet ingesloten, die het hele logo vanuit het niets animeert, met echte levendigheid.

Hoe maak je een Simple Advent-kalender in JavaScript

Hoe maak je een Simple Advent-kalender in JavaScript

De advent is de periode van wachten en voorbereiden op Kerstmis die vier zondagen vóór de vooravond van Kerstmis begint. Het verstrijken van de Adventtijd wordt traditioneel gemeten met behulp van een adventskalender of een adventskrans. Hoewel het begin van Advent geen vaste datum is, beginnen adventskalenders gewoonlijk op 1 december.O

(Technische en ontwerptips)

Meld u aan bij meerdere accounts op dezelfde site met deze Chrome-extensie

Meld u aan bij meerdere accounts op dezelfde site met deze Chrome-extensie

Het beheren van meerdere accounts van een enkele sociale netwerkservice kan een gedoe zijn, omdat de noodzaak om constant uit te loggen en in te loggen bij een service niet bepaald leuk is. Gelukkig is er een Chrome-extensie genaamd SessionBox die accountbeheer een stuk eenvoudiger maakt .Zoals de naam al aangeeft, is SessionBox een extensie waarmee u meerdere sessies van een bepaalde website in één venster kunt starten .A

(Technische en ontwerptips)