Accentsconagua
Share
GitHub is een geweldige plek om projecten te vinden die gratis worden verspreid onder het publiek, maar heb je ooit een repo in de hoofdrol gehad om te vergeten hoe cool en nuttig het zou kunnen zijn? In dit artikel zal ik enkele fantastische projecten aan het licht brengen die gratis beschikbaar zijn op GItHub die een sterke focus hebben op het helpen van animators bij het bouwen van beweging voor het web.
Rellax is een romige, soepele, superlichtgewicht parallaxbibliotheek die ook op verschillende apparaten werkt. Zonder tonnen code te schrijven, kun je leren hoe je een vloeiende scrollervaring kunt maken voor je project en volledig inzicht krijgen in de ins en outs van wat parallax maakt tot wat het is.
Als je zin hebt in het maken van meer levensechte op fysica gebaseerde bewegingen voor je werk kijk dan niet verder dan dynamics.js.
Hiermee kunt u CSS-eigenschappen van elk DOM-element, SVG-eigenschappen en JavaScript-objecten animeren. Niet alleen zal deze bibliotheek je JS-kennis testen, maar je zult ook leren hoe de natuurkunde zorgt voor een meer intuïtieve en levensechte ervaring voor gebruikers.
De schuifregelaars op de startpagina helpen u om te begrijpen hoe elke eigenschap in combinatie met zijn collega's werkt, om op fysica gebaseerde bewegingen te maken die onze echte wereldbewegingen weerspiegelen.
Maak verbluffende, vloeiende en vloeiende overgangen tussen de pagina's van uw website. Barba.js is een kleine (4 kb minified en gzipped), flexibele en afhankelijkheid-vrije bibliotheek die helpt de UX van uw website naar het volgende niveau te brengen.
Het is ook een les in hoe PJAX (push-state AJAX) en de Push State API kunnen worden gebruikt om pagina-overgangen te verbeteren. Als u nog nooit van deze technologieën hebt gehoord, is dit een geweldige introductie tot hen, wat uiteindelijk resulteert in een zeer glad effect voor het doorlopen van pagina's.
Tip: bekijk deze tutorial voor meer informatie over Push State:
Wick is de gratis toolkit voor het maken van multimedia voor het maken van multimedia. Het is een browsergebaseerde hybride animatie- en codeeromgeving voor het maken van interactiviteit voor internet. Zwaar geïnspireerd door tools zoals Flash (keyframe-gebaseerde animaties iemand?), HyperCard en Scratch, werd het ontwikkeld als antwoord op de groeiende behoefte aan een dergelijke tool met het moderne web.
Maak vloeiende bewegingen met behulp van de browser als uw gids, zonder extra software te downloaden om de klus te klaren.
Maak prachtige CSS3-aangedreven animaties in een mum van tijd. Met het hulpprogramma op bouncejs.com kunt u statische hoofdframes genereren die kunnen worden gebruikt zonder extra JavaScript, maar als u wilt dat uw toepassing deze snel genereert, kunt u de Bounce.js-bibliotheek gebruiken.
De keyframe-uitvoer is zeker intrigerend en inzichtelijk in het gebruik van de matrix () CSS-functie en keyframe-opbouw. Dit is een geweldig hulpmiddel om een specifieke beweging echt af te stemmen en te begrijpen hoe keyframes kunnen worden gebruikt om verbluffende, bounce-achtige bewegingen te maken. Er is ook een geweldig Medium-artikel, geschreven door de maker Joel Besada, over het verminderen van het aantal gegenereerde keyframes, waarom dit het waard is om na te streven en een fascinerende blik op versoepeling.
Notitie: op dit moment is Bounce niet langer in actieve ontwikkeling zonder plannen voor toekomstige ontwikkeling volgens Joel.
Anime is een lichtgewicht JavaScript-animatiebibliotheek. Het werkt met CSS-eigenschappen, individuele CSS-transformaties, SVG- of andere DOM-kenmerken en JavaScript-objecten.
Dit is een geweldige bibliotheek om inzicht te krijgen in het maken en leren van tijdlijngebaseerde bewegingen, het starten van animaties op bepaalde waarden, ingewikkelde keyframe-animaties, het definiëren van starttijden ten opzichte van een vorige animatieduur, het bouwen van afspeelbesturingselementen en nog veel meer.
Ik raad ten zeerste aan om het een beetje door te geven en als je nog meer wilt, zijn er ook genoeg demo's op CodePen.
Ik hou van deze. Wacht! Animate biedt een eenvoudige manier om keyframe-percentages te berekenen, zodat u een vertraging tussen elke animatie-iteratie kunt invoegen.
Er is een configuratietool om wachttijden toe te voegen aan je eigen animaties zonder dat je JavaScript nodig hebt, omdat CSS geen eenvoudige manier biedt om een animatie te onderbreken voordat deze opnieuw rondloopt; animatie-delay betekent gewoon een vertraging aan het begin van de animatie.
U kunt zelfs uw timing, duur en bewegingsrichting aanpassen om uw gewenste beweging fijn af te stellen. Dit is een heel leuke manier om over beweging te leren en geeft je feedback voor je instellingen in realtime.
MoJS is een "riem voor bewegende grafische afbeeldingen voor het web". Hiermee kunt u zijdezachte animaties en effecten maken voor een verbluffende gebruikerservaring. Er is zelfs een optie om een aangepaste build te maken voor de behoeften van uw huidige project; zo lange overheadkosten van grote bestanden!
Er zijn veel demo's om in te duiken en op te noemen op GitHub. Leer om een aantal echt boeiende bewegingseffecten te creëren, zoals mijn favoriet de "Bubble Layout", woord onthullende, stofsporen en andere effecten zoals "burst", en nog veel meer. Als je wilt leren hoe je ingewikkelde en ingewikkelde effecten kunt maken, zoek dan niet verder, want MoJS heeft je rug.
Nog een geest ... Spirit is een fantastische animatietool voor het web (de app is hier te vinden); spring in en animeer objecten met behulp van een visuele tijdlijn. Ik weet gewoon dat deze geweldig zal zijn!
Spirit zal de manier waarop je animaties maakt voor het web veranderen. U krijgt volledige tijdlijncontrole, de mogelijkheid om animaties te inspecteren en een eenvoudig te leren en te begrijpen API. Het is een intuïtieve en eenvoudige manier om bouwanimaties te begrijpen zonder de grote overhead van het leren van ingewikkelde software.
ScrollReveal biedt u eenvoudige schuifanimaties voor het web. En het is ook lichtgewicht; afgezien van het hebben van nul afhankelijkheden, is de bibliotheek 3,3 KB verkleind en Gzipped.
Zorg dat je voeten nat zijn met op intervallen gebaseerde reeksanimaties die kunnen worden geconfigureerd om asynchroon te laden. ScrollReveal ondersteunt ook 3d rotatie uit de doos en dat betekent dat je je 3D-leren kunt leren en echt creatief kunt worden zonder de onderliggende scroll-functionaliteit en -mechanica te hoeven laten groeien.
Heb je nog meer opensource-repo's die ik heb gemist? Heeft u een van de projecten gebruikt die voor dit artikel worden vermeld? Laat een reactie achter en link hieronder! Ik hoop dat ten minste een van deze voorbeelden van nut kan zijn in je dagelijkse werk. Happy codering!
