Accentsconagua
Share
GitHub è un ottimo posto per trovare progetti che sono distribuiti gratuitamente al pubblico, ma hai mai recitato in un repository solo per dimenticare quanto può essere bello e utile? In questo articolo porterò alla luce alcuni fantastici progetti liberamente disponibili su GItHub che hanno un forte focus sull'aiutare gli animatori a costruire movimento per il web.
Rellax è una libreria di parallasse liscia, super leggera, che funziona anche su vari dispositivi. Senza scrivere tonnellate di codice puoi imparare come creare un'esperienza scorrevole per il tuo progetto e comprendere appieno i dettagli di ciò che rende la parallasse ciò che è.
Se vuoi creare un movimento più realistico basato sulla fisica per il tuo lavoro, non guardare oltre dynamics.js.
Con esso, puoi animare le proprietà CSS di qualsiasi elemento DOM, proprietà SVG e oggetti JavaScript. Questa libreria non solo metterà alla prova la tua abilità JS, ma imparerai anche come la fisica rende un'esperienza più intuitiva e realistica per gli utenti.
I cursori sulla sua homepage ti aiutano davvero a capire come ogni proprietà lavora in collaborazione con i suoi pari per creare movimenti basati sulla fisica che riflettono i nostri movimenti del mondo reale.
Crea transizioni straordinarie, fluide e fluide tra le pagine del tuo sito web. Barba.js è una libreria piccola (4kb minified e gzip), flessibile e senza dipendenza che aiuta a portare la UX del tuo sito Web al livello successivo.
È anche una lezione su come PJAX (push state AJAX) e l'API Push State può essere utilizzata per migliorare le transizioni di pagina. Se non hai mai sentito parlare di queste tecnologie è un'ottima introduzione a loro che, alla fine, si traduce in un effetto molto lucido per l'attraversamento delle pagine.
Mancia: dai un'occhiata a questo tutorial per ulteriori informazioni su Push State:
Wick è il toolkit di creazione multimediale gratuito e open source di internet. È un ambiente di animazione e codifica ibrido basato su browser per creare interattività per il Web. Fortemente ispirato da strumenti come Flash (chiunque abbia creato animazioni basate su keyframe?), HyperCard e Scratch, è stato sviluppato in risposta a una crescente necessità di tale strumento con il web moderno.
Crea movimenti fluidi utilizzando il browser come guida, senza scaricare alcun software aggiuntivo per svolgere il lavoro.
Crea fantastiche animazioni basate su CSS3 in pochissimo tempo. Lo strumento su bouncejs.com ti consente di generare keyfram statici che possono essere utilizzati senza JavaScript, ma se desideri che la tua applicazione li generi al volo, puoi utilizzare la libreria Bounce.js.
L'output dei fotogrammi chiave è sicuramente intrigante e intuitivo nell'uso della funzione CSS (matrix) e del fotogramma chiave. Questo è un ottimo strumento per mettere a punto un movimento specifico e capire come è possibile utilizzare i fotogrammi chiave per creare incredibili movimenti di rimbalzo. C'è anche un grande articolo di Medium, scritto dal suo creatore Joel Besada, sulla riduzione della quantità di fotogrammi chiave generati, sul perché questo è qualcosa per cui vale la pena sforzarsi e uno sguardo affascinante sull'allentamento.
Nota: al momento, Bounce non è più in fase di sviluppo attivo senza piani per lo sviluppo futuro secondo Joel.
Anime è una libreria di animazione JavaScript leggera. Funziona con tutte le proprietà CSS, le singole trasformazioni CSS, SVG o eventuali attributi DOM e oggetti JavaScript.
Questa è una libreria meravigliosa per capire come costruire e conoscere i movimenti basati sulla timeline, avviare animazioni a determinati valori, animazioni di fotogrammi chiave complicate, definire i tempi di inizio relativi a una durata precedente delle animazioni, costruire controlli di riproduzione e molto altro ancora.
Consiglio vivamente di darle una recensione e se lo desideri ancora di più ci sono anche molte demo su CodePen.
Io amo questo. Aspettare! Animate fornisce un modo semplice per calcolare le percentuali dei fotogrammi chiave in modo da poter inserire un ritardo tra ogni iterazione dell'animazione.
C'è uno strumento di configurazione per aggiungere attese alle tue animazioni senza bisogno di JavaScript, dato che i CSS non forniscono un modo semplice per mettere in pausa un'animazione prima che giri di nuovo intorno; animazione ritardo indica semplicemente un ritardo all'inizio dell'animazione.
Puoi anche personalizzare i tempi, la durata e la direzione del movimento per mettere a punto il movimento desiderato. Questo è un modo davvero divertente per conoscere il movimento e ti dà un feedback per le tue impostazioni in tempo reale.
MoJS è una "cintura per strumenti grafici in movimento per il web". Ti consente di creare animazioni e effetti morbidi come seta per un'esperienza utente sbalorditiva. C'è anche un'opzione per creare una build personalizzata per le esigenze del tuo attuale progetto; così grandi overhead di file di grandi dimensioni!
Ci sono un sacco di demo da immergere e elencare su GitHub. Impara a creare effetti di movimento davvero accattivanti come il mio preferito "Bubble Layout", parola rivelatrice, tracce di polvere e altri effetti come "scoppiare", e molto altro ancora. Se vuoi imparare come creare effetti complicati e complessi, non guardare oltre, perché MoJS ti dà le spalle.
Un altro fantasma ... Spirit è uno straordinario strumento di animazione per il web (l'app può essere trovata qui); salta dentro e anima gli oggetti usando una timeline visiva. So solo che questo sarà fantastico!
Lo spirito cambierà il modo in cui crei animazioni per il web. Ti viene dato il controllo completo della timeline, la possibilità di ispezionare le animazioni e un'API facile da apprendere e capire. È un modo intuitivo e semplice per comprendere le animazioni degli edifici senza il grande sovraccarico di apprendimento di software complicato.
ScrollReveal ti offre facili animazioni di scorrimento per il web. E anche leggero; oltre ad avere zero dipendenze, la libreria ha una dimensione minima di 3.3 KB e Gzip.
Ottieni i piedi bagnati con animazioni di sequenza basate su intervalli che possono essere configurate per caricare in modo asincrono. ScrollReveal supporta anche la rotazione 3d out of the box e ciò significa che puoi imparare il 3D e diventare davvero creativo senza dover affibbiare la funzionalità e i meccanismi di scorrimento sottostanti.
Hai qualche altro repository open source che mi sono perso? Hai usato uno dei progetti elencati per questo articolo? Lascia un commento e link qui sotto! Spero che almeno uno di questi esempi possa essere utile nel tuo lavoro quotidiano. Buona programmazione!
